TypeScript
Módulos - exportación e importación
Buscar..
Hola módulo mundial
//hello.ts export function hello(name: string){ console.log(`Hello ${name}!`); } function helloES(name: string){ console.log(`Hola ${name}!`); } export {helloES}; export default hello;
Cargar utilizando índice de directorio
Si el directorio contiene el archivo denominado index.ts
se puede cargar utilizando solo el nombre del directorio (para index.ts
nombre de archivo es opcional).
//welcome/index.ts export function welcome(name: string){ console.log(`Welcome ${name}!`); }
Ejemplo de uso de módulos definidos
import {hello, helloES} from "./hello"; // load specified elements import defaultHello from "./hello"; // load default export into name defaultHello import * as Bundle from "./hello"; // load all exports as Bundle import {welcome} from "./welcome"; // note index.ts is omitted hello("World"); // Hello World! helloES("Mundo"); // Hola Mundo! defaultHello("World"); // Hello World! Bundle.hello("World"); // Hello World! Bundle.helloES("Mundo"); // Hola Mundo! welcome("Human"); // Welcome Human!
Exportación / Importación de declaraciones
Cualquier declaración (variable, const, función, clase, etc.) se puede exportar desde un módulo a importar en otro módulo.
Typescript ofrece dos tipos de exportación: nombrada y predeterminada.
Exportación con nombre
// adams.ts export function hello(name: string){ console.log(`Hello ${name}!`); } export const answerToLifeTheUniverseAndEverything = 42; export const unused = 0;
Al importar exportaciones con nombre, puede especificar qué elementos desea importar.
import {hello, answerToLifeTheUniverseAndEverything} from "./adams"; hello(answerToLifeTheUniverseAndEverything); // Hello 42!
Exportación por defecto
Cada módulo puede tener una exportación por defecto.
// dent.ts const defaultValue = 54; export default defaultValue;
el cual puede ser importado usando
import dentValue from "./dent"; console.log(dentValue); // 54
Importación agrupada
Typescript ofrece un método para importar un módulo entero en una variable
// adams.ts export function hello(name: string){ console.log(`Hello ${name}!`); } export const answerToLifeTheUniverseAndEverything = 42;
import * as Bundle from "./adams"; Bundle.hello(Bundle.answerToLifeTheUniverseAndEverything); // Hello 42! console.log(Bundle.unused); // 0
Reexportar
Typescript permite reexportar declaraciones.
//Operator.ts
interface Operator {
eval(a: number, b: number): number;
}
export default Operator;
//Add.ts
import Operator from "./Operator";
export class Add implements Operator {
eval(a: number, b: number): number {
return a + b;
}
}
//Mul.ts
import Operator from "./Operator";
export class Mul implements Operator {
eval(a: number, b: number): number {
return a * b;
}
}
Puedes agrupar todas las operaciones en una sola biblioteca.
//Operators.ts
import {Add} from "./Add";
import {Mul} from "./Mul";
export {Add, Mul};
Las declaraciones con nombre se pueden reexportar usando una sintaxis más corta
//NamedOperators.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
Las exportaciones predeterminadas también se pueden exportar, pero no hay una sintaxis corta disponible. Recuerde, solo es posible una exportación predeterminada por módulo.
//Calculator.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
import Operator from "./Operator";
export default Operator;
Posible es la reexportación de importación agrupada
//RepackedCalculator.ts
export * from "./Operators";
Al reexportar paquetes, las declaraciones pueden ser anuladas cuando se declaran explícitamente.
//FixedCalculator.ts
export * from "./Calculator"
import Operator from "./Calculator";
export class Add implements Operator {
eval(a: number, b: number): number {
return 42;
}
}
Ejemplo de uso
//run.ts
import {Add, Mul} from "./FixedCalculator";
const add = new Add();
const mul = new Mul();
console.log(add.eval(1, 1)); // 42
console.log(mul.eval(3, 4)); // 12