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.
Module1.ts
// 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"; }
Module2.ts
// 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.
Module1.ts
// Exporting the class which used in another file // export keyword used to Export the module export class GFG { StringConcat(banner) { return "Welcome to " + banner; } }
Module2.ts
// 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.
Module1.ts
// Export all the classes functions export function Welcome(str: string) { return "Hello " + str + "..!"; } export class Geeks { msg(str1: string) { return "Welcome to " + str1; } }
Module2.ts
// 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:
Publicación traducida automáticamente
Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA