Importar módulos en TypeScript

1. Crear un proyecto de mecanografiado
2. Use la palabra clave exportar en TypeScript
3. Use la palabra clave importar en TypeScript
4. Exportar e importar un solo objeto en TypeScript
5. Exportar e importar múltiples objetos en TypeScript
6. Conclusión

Cuando aprendemos a desarrollar aplicaciones usando TypeScript, generalmente creamos programas muy simples que a menudo no tienen dependencias entre sí.

Por ejemplo, un programa para registrar un mensaje en la consola es solo una línea y está contenido en un archivo. Sin embargo, las aplicaciones de nivel de producción contienen varios archivos y estos archivos contienen código que tiene dependencias.

El desarrollador puede implementar estas dependencias o adquirirlas de una biblioteca de terceros mediante los módulos de TypeScript. La documentación de TypeScript define un módulo como cualquier archivo que contiene una importación o exportación de nivel superior.

Cualquier archivo que no contenga una importación o exportación de nivel superior significa que no se puede acceder al código fuera del archivo; de lo contrario, el alcance del código es global.

Crear un proyecto de mecanografiado

Abra WebStorm IDEA y seleccione Archivo > Nuevo > Proyecto. En la ventana que se abre, seleccione Node.js en el lado izquierdo y en la ventana que se abre a la derecha etiquetada como Nuevo Proyecto, cambie el nombre del proyecto de sin título a typescript-modules en la sección Ubicación del proyecto.

Finalmente, presione el botón etiquetado como Crear para generar el proyecto. Una vez que se abra la ventana, abra una nueva ventana de Terminal seleccionando Ver > Ventanas de herramientas > Terminal o el atajo de teclado Alt+F12.

Use el siguiente comando para crear un archivo tsconfig.json para la aplicación.

~/WebstormProjects/typescript-modules$ tsc --init

Una vez que se haya generado su archivo, asegúrese de que la configuración en el archivo sea como se muestra a continuación. También podemos copiar y pegar la configuración en el archivo tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true

    }
}

Use la palabra clave exportar en TypeScript

Cree un archivo llamado EmailService.ts en la carpeta typescript-modules y copie y pegue el siguiente código en el archivo.

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

En este archivo hemos creado dos clases denominadas User y EmailService, respectivamente. El método sendEmail() simula la acción de enviar un correo electrónico.

El método sendEmail() utiliza la clase Usuario para representar al usuario que envía y recibe el mensaje de correo electrónico. Dado que queremos que las clases sean accesibles fuera del archivo, hemos prefijado cada clase con la palabra clave exportar.

Use la palabra clave importar en TypeScript

Cree un archivo llamado Main.ts y copie y pegue el siguiente código en el archivo.

import {User, EmailService} from "./EmailService"

function main(){
    let thisService = new EmailService();
    console.log(thisService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

En este archivo, hemos creado una función llamada main() que registra la cadena devuelta por el método sendEmail() a la consola.

El método acepta tres parámetros: a, de y mensaje y observa que los dos primeros parámetros son de tipo Usuario.

Para ejecutar este código, siga los pasos mencionados en este tutorial para abrir una nueva ventana de terminal, copie y pegue el siguiente comando en la terminal y presione Enter.

~/WebstormProjects/typescript-modules$ tsc && node Main.js

Este comando transpila los archivos TypeScript a archivos JavaScript y ejecuta el archivo Main.js utilizando el entorno de tiempo de ejecución nodo. Asegúrese de que la salida de la aplicación sea como se muestra a continuación.

message: Happy Birthday from: doe to: john

Exportar e importar un solo objeto en TypeScript

Cree un archivo llamado User.ts y corte la clase User en el archivo EmailService.ts al archivo de usuario. Modifique el código en el archivo de usuario para que sea como se muestra a continuación.

class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export = User

En este código, eliminamos la palabra clave exportar de la declaración de clase y la definimos usando la declaración exportar = Usuario después de la declaración de clase. Esto muestra que estamos exportando un solo objeto de este módulo que es una clase.

Dado que también queremos que EmailService exporte un solo objeto, elimine la palabra clave exportar de la clase y agréguela después de la declaración de clase, como se muestra a continuación.

import User = require("./User");

class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

export = EmailService

Dado que la clase EmailService usa el objeto Usuario, tenemos que importarlo a la clase usando la función require(). Tenga en cuenta que así es como importamos un solo objeto de un módulo.

Otro punto a tener en cuenta es que con este enfoque de importación, podemos invocar directamente la clase usando la palabra clave nuevo ya que el objeto que se importa es una clase, y lo mismo se aplica a funciones, interfaces y otros.

Para probar si los cambios que hemos realizado funcionan como se esperaba, reutilizaremos el archivo Main.ts con algunos cambios menores en las declaraciones de importación, como se muestra a continuación.

import EmailService = require("./EmailService")
import User = require("./User")

function main(){
    let newService = new EmailService();
    console.log(newService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

Los únicos cambios que hemos realizado en este archivo son el uso de la función require() para importar los objetos individuales desde el módulo User.ts y el módulo EmailService.ts.

Ejecute la aplicación usando el mismo comando que usamos en el ejemplo anterior y asegúrese de que el resultado sea como se muestra a continuación.

message: Happy Birthday from: doe to: john

Exportar e importar múltiples objetos en TypeScript

Modifique los ejemplos anteriores para usar las declaraciones exportar e importar como hicimos en el primer ejemplo. Elimine la exportación e importación de un solo objeto en los tres archivos que incluyen EmailService.ts y User.ts.

Asegúrese de que el código de los dos archivos sea el que se muestra a continuación.

Usuario.ts:

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

EmailService.ts:

import {User} from "./User";

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

Cree un archivo llamado AllExports.ts en la carpeta typescript-modules y copie y pegue el siguiente código en el archivo.

export * from "./EmailService"
export * from "./User"

En este archivo, estamos reexportando todas las clases de miembros, interfaces y funciones exportadas en los archivos EmailService.ts y User.ts. Tenga en cuenta que estamos exportando clases en este archivo ya que el módulo contiene solo declaraciones de clase.

Usaremos este módulo para importar todos los módulos declarados en el archivo Main.ts usando una sola declaración de importación. Para lograr esto, asegúrese de que el código del archivo Main.ts sea como se muestra a continuación.

import * as emailManager from "./AllExports"

function main(){
    let newService = new emailManager.EmailService();
    console.log(newService.sendEmail(
        new emailManager.User("john"),
        new emailManager.User("doe"),
        "Happy Birthday"));
}
main();

Observe cómo importamos todos los módulos definidos en el archivo AllExports.ts usando la sintaxis * as. El asterisco * le dice al compilador que importe todas las exportaciones en el archivo, mientras que la palabra clave as crea un nombre de objeto personalizado para las exportaciones importadas.

Invocamos el objeto usando la palabra clave nuevo en los ejemplos anteriores. Sin embargo, esto no funcionará en este ejemplo.

Para acceder a los detalles del miembro del objeto, necesitamos usar el punto . del objeto. operador acceder a ellos, que en nuestro caso son las clases EmailService y User.

Si intentamos usar la palabra clave nuevo en el objeto emailManager, obtenemos la advertencia Esta expresión no se puede construir. Ejecute este código y asegúrese de que el resultado sea como se muestra a continuación.

message: Happy Birthday from: doe to: john

Conclusión

Este tutorial nos enseñó cómo trabajar con módulos en TypeScript. Los temas cubiertos incluyen el uso de las palabras clave exportar e importar y exportar e importar en objetos únicos y múltiples.