Modules (módulos)

JavaScript tiene una larga historia acerca de la modularización del código. A través del tiempo la comunidad y la especificación de JavaScript ha convergido en un formato llamado ES Modules (Módulos ES) que muy probablemente conozcas como import/export.

Los ES Modules fueron agregados a partir del 2015, y para el 2020 han adquirido bastante soporte dentro de los navegadores web e interpretes de JavaScript runtime.

Para propósitos de aprendizaje cubriremos los ES Modules import/export así como su precursor Common JS modules.exports.

¿Cómo se definen los módulos en TypeScript?

En TypeScript al igual que en ES 2015, cualquier archivo que contenga en su parte superior import o export es considerado un módulo.

Por el contrario cualquier archivo que no contenga un import o export es tratado como un script cuyo contenidos son tratados en un scope global (y por ende para los módulos son considerados así también).

Los módulos son ejecutados dentro de su propio scope, no en el scope global. Esto quiere decir que las variables, funciones, clases, etc. declaradas dentro de un módulo no son visibles fuera del módulo a menos que estas sean explícitamente exportadas utilizando una de las formas de exportarlas. De igual manera para utilizar una variable, clase, interface, etc., esta tiene que ser importada primero.

No modules

Antes de que empecemos, es importante entender que es lo que TypeScript considera un módulo. La especificación de JavaScript sostiene que cualquier archivo JavaScript que no tenga una instrucción export o un await en el nivel superior, entonces debe ser considerado un script y no un módulo.

Dentro de un script, las variables son declaradas para residir dentro de un scope global, y se asume que se utilizará la directiva --outFile del compilador para unir el código de todos los archivos en uno solo, o múltiples tags <script> dentro del HTML para cargar estos archivos en el orden correcto.

Si tienes un archivo que no tiene ninguna instrucción import o export, pero deseas que sea tratado como un módulo, utiliza la siguiente instrucción al final.

export {};