¿Cómo importar un módulo en Typescript?

Antes de comenzar con la importación de módulos, en primer lugar, debemos conocer los conceptos básicos de los módulos en TypeScript .

Sabemos que JavaScript llegó con el concepto de módulos de la versión ES6 en 2015 y para 2020 tenía un amplio soporte en la mayoría de los navegadores web y tiempos de ejecución de JavaScript. TypeScript también comparte el mismo concepto de un módulo. Cualquier archivo que contenga una importación o exportación de nivel superior se considera un módulo.

El módulo está diseñado para organizar un código escrito en TypeScript y utilizado como ámbito local. Los módulos son básicamente scripts escritos en archivos separados. La importación le permite hacer referencia a su ubicación de origen en un archivo existente. Ahora entenderemos diferentes formas de importar modelos externos y sabremos cómo usar ese módulo en la ubicación deseada.

Enfoque: antes de importar cualquier módulo, debemos exportarlo desde otro archivo. Podemos crear un módulo usando la palabra clave export y podemos usarlo en otros módulos usando la palabra clave import . Podemos exportar tanto módulos basados ​​en clases como módulos basados ​​en funciones. Como se muestra abajo.

Sintaxis para exportar módulo basado en clases: 

export class CLASS_NAME {
  constructor(para1 , para2) {}
  Method() {
    console.log("This is class-based Module export" );
  }
}

Sintaxis para el módulo basado en funciones de exportación:

export function FUNCTION_NAME {
    console.log("This is function-based Module export");
}

Formas de importar módulos externos: en TypeScript, usamos la palabra clave import y from para importar un módulo en particular o un parámetro con nombre. Veamos las diferentes formas en que podemos usar la operación de importación.

1. Exportación predeterminada de importación: para importar la exportación predeterminada desde un archivo, podemos usar la ubicación del archivo desde y usar la palabra clave importar antes, o podemos darle un nombre específico, es decir, NOMBRE_MÓDULO a la importación que hace la sintaxis como el seguiente.

import MODULE_NAME from './MODULE_LOCATION'

2. Importar valores con nombre: no es necesario que cada archivo exporte módulos predeterminados, pueden tener varios parámetros con nombre y, en caso de que necesitemos importar uno, debemos usar la sintaxis de la siguiente manera.

import { MODULE_NAME } from './MODULE_LOCATION'

Y de manera similar, para las importaciones de varios módulos, podemos usar un separador de coma ( , ) para separar los nombres de dos parámetros dentro de las llaves { }. Como se muestra abajo.

import { MODULE_NAME1, MODULE_NAME2, ... , 
    MODULE_NAMEn } from ./MODULE_LOCATION'

3. Importación de una combinación de exportaciones predeterminadas y valores con nombre: el título deja claro que lo que debemos ver es la sintaxis de las mismas. Para importar una combinación, debemos usar la siguiente sintaxis.  

import DEFAULT_EXPORT, { MODULE_NAME1, 
    MODULE_NAME2, ... , MODULE_NAMEn } 
    from './MODULE_LOCATION'

4. Importe todo desde el módulo: a veces necesita importar cada módulo desde el archivo específico, luego puede usar el asterisco (*) para importar todos los módulos y asignarlos a un objeto (OBJ_NAME) como se muestra a continuación

import * as OBJ_NAME from './MODULE_LOCATION'

O puedes usar:

import MODULE = require('LOCATION')

Ahora implementamos lo que aprendimos anteriormente usando los siguientes ejemplos:

Ejemplo 1: importar un módulo de exportación predeterminado de un archivo a otro archivo.

// Exporting the Default export module
// which is used in another file
// export default keyword used to 
// Export the module
export default function GFG() {
    return "GeeksforGeeks";
}

// Importing the default export module 
// from the location of the file.
import GFG from "./MODULE1";
  
// Creating an object of the
// class which is imported
let msg = GFG();
  
console.log("This is MSG from ");
  
console.log(msg);

Pasos para imprimir la salida: Primero, convierta el archivo TypeScript en JavaScript para eso necesita ejecutar el siguiente comando en su terminal respectivo.

> tsc MODULE2.ts

Después de eso, debe ejecutar un archivo JavaScript utilizando el módulo Node. Como se muestra abajo.

> node MODULE2.js

Producción:

Ejemplo 2: Importar una clase de un archivo a otro archivo.

// Exporting the class which used in another file
// export keyword used to Export the module
export class GFG {
      StringConcat(banner) {
        return "Welcome to " + banner;
      }
}

// Importing the module
// from the location of the file.
import { GFG } from "./Module1";
  
let obj1 = new GFG();
  
console.log(obj1.StringConcat("GeeksforGeeks"));

Pasos para imprimir la salida:

> tsc MODULE2.ts
> node MODULE2.js

Producción:

Ejemplo 3: Importar todos los módulos de un archivo a otro archivo.

// Export all the classes functions
  
export function Welcome(str: string) {
  return "Hello " + str + "..!";
}
  
export class Geeks {
  msg(str1: string) {
    return "Welcome to " + str1;
  }
}

// Importing everything from the MODULE1.ts 
// using 'import *' and 'as' keyword
  
import * as AllImports from "./MODULE1";
  
// Variables created
let str = "Geeks";
let str1 = "GeeksforGeeks";
  
// Calling function using common import
// name i.e. AllImport
console.log(AllImports.Welcome(str));
  
// Object of imported class is created
let obj = new AllImports.Geeks();
  
// Calling the import class function
// using object name
console.log(obj.msg(str1));

Pasos para imprimir la salida:

> tsc MODULE2.ts
> node MODULE2.js

Producción: