Búsqueda de sitios web

ecmascript 6 - Confusión entre la sintaxis de módulos de ES6 y la sintaxis de módulos de Typescript

Todos :

Soy bastante nuevo en ES6 y TypeScript, pero estoy aprendiendo y comparándolos en paralelo en este momento.

Lo primero que me confunde tanto es que hay muchas superposiciones de similitudes, por ejemplo, en términos del espacio de nombres y el módulo (como import/from/export, etc.):

Me pregunto si alguien podría darme un breve resumen comparativo sobre el uso de ellos.

También me pregunto si hay relación entre Typescript y ES6?

Gracias

Respuesta #1

Esta pregunta podría estar mejor dirigida a la sección de Programadores de StackExchange, pero aquí vamos.

Hay dos tipos de módulos en Typescript, módulos internos (espacios de nombres) y módulos externos. La sintaxis de estos últimos es equivalente a la sintaxis de módulos de ES6.

Módulos internos

También llamados espacios de nombres. Los módulos internos se utilizan cuando el módulo debe compilarse junto con un proyecto, y son principalmente una herramienta para la separación de preocupaciones, de manera muy similar al uso de espacios de nombres en C#. Cuando se compilan con el compilador de TypeScript, los módulos internos se colocan en cierres (mediante funciones que se invocan a sí mismas).

MyApp.ts

namespace MyApp {
    export class MyClass { }
}

... cuando se compila en ES5, se convierte en la siguiente abominación:

MyApp.js

// ES5 compatible
var MyApp;
(function (MyApp) {
    var MyClass = (function () {
        function MyClass() { }
        return MyClass;
    })();
    MyApp.MyClass = MyClass;
})(MyApp || (MyApp = {}));

Cuando se compila a ES6, se vuelve un poco más limpio, ya que hay sintaxis nativa para las clases:

MyApp.js

// ES6 compatible
var MyApp;
(function (MyApp) {
    class MyClass { }
    MyApp.MyClass = MyClass;
})(MyApp || (MyApp = {}));

Los módulos internos son especialmente útiles cuando compilas toda tu base de código en un solo archivo de salida.

Módulos Externos

Los módulos externos se compilan por separado (por archivo) y deben cargarse con un sistema de carga de módulos (como RequireJS en ES5, o de manera nativa en ES6) durante la ejecución. No hay una declaración de módulo a nivel superior, ya que una declaración de exportación o importación a nivel superior instruirá al compilador de que el archivo en sí mismo es un módulo y debe compilarse en consecuencia.

Cuando se compila con el compilador de TypeScript, los módulos externos se envuelven en la sintaxis de módulo seleccionada. Actualmente son compatibles AMD, CommonJS, UMD, System en la plataforma ES5 y la sintaxis nativa en la plataforma ES6.

MyApp.ts

export class MyClass { }

... cuando se compila en ES5 - con, digamos, UMD - se convierte en la siguiente blasfemia:

MyApp.js

// ES5 compatible
(function (deps, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    } else if (typeof define === 'function' && define.amd) {
        define(deps, factory);
    }
})(["require", "exports"], function (require, exports) {
    var MyClass = (function () {
        function MyClass() { }
        return MyClass;
    })();
    exports.MyClass = MyClass;
});

Sin embargo, al compilarse en ES6, el código resultante se vuelve infinitamente más limpio, ya que la sintaxis de módulos de TypeScript se basa en (equivale a) la sintaxis de módulos de ES6:

MyApp.js

// ES6 compatible
export class MyClass { }

Sin embargo, la plataforma ES6 aún no está ampliamente soportada, por lo que sugiero optar por la compilación ES5. Esto conlleva el costo de código adicional generado como plantilla, pero además del aumento marginal del ancho de banda, no existen efectos secundarios adicionales: la misma base de código puede compilarse tanto en ES5 como en ES6, con resultados funcionalmente idénticos.

Artículos relacionados