TypeScript
Moduli: esportazione e importazione
Ricerca…
Ciao modulo mondo
//hello.ts export function hello(name: string){ console.log(`Hello ${name}!`); } function helloES(name: string){ console.log(`Hola ${name}!`); } export {helloES}; export default hello;
Caricare usando l'indice della directory
Se la directory contiene il file index.ts
, può essere caricata utilizzando solo il nome della directory (per index.ts
nomefile è facoltativo).
//welcome/index.ts export function welcome(name: string){ console.log(`Welcome ${name}!`); }
Esempio di utilizzo di moduli definiti
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!
Esportazione / importazione di dichiarazioni
Qualsiasi dichiarazione (variabile, const, funzione, classe, ecc.) Può essere esportata dal modulo per essere importata in un altro modulo.
Il dattiloscritto offre due tipi di esportazione: named e default.
Esportazione denominata
// adams.ts export function hello(name: string){ console.log(`Hello ${name}!`); } export const answerToLifeTheUniverseAndEverything = 42; export const unused = 0;
Quando si importano esportazioni con nome, è possibile specificare quali elementi si desidera importare.
import {hello, answerToLifeTheUniverseAndEverything} from "./adams"; hello(answerToLifeTheUniverseAndEverything); // Hello 42!
Esportazione predefinita
Ogni modulo può avere un'esportazione predefinita
// dent.ts const defaultValue = 54; export default defaultValue;
che può essere importato usando
import dentValue from "./dent"; console.log(dentValue); // 54
Importazione in bundle
Typescript offre un metodo per importare l'intero modulo in variabile
// 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
Riesportare
Il dattiloscritto consente di riesportare le dichiarazioni.
//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;
}
}
È possibile raggruppare tutte le operazioni in una singola libreria
//Operators.ts
import {Add} from "./Add";
import {Mul} from "./Mul";
export {Add, Mul};
Le dichiarazioni nominate possono essere riesportate usando la sintassi più breve
//NamedOperators.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
Le esportazioni predefinite possono anche essere esportate, ma non è disponibile una sintassi breve. Ricorda, è possibile solo una esportazione predefinita per modulo.
//Calculator.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
import Operator from "./Operator";
export default Operator;
Possibile è riesportazione di importazione in bundle
//RepackedCalculator.ts
export * from "./Operators";
Durante la riesportazione del pacchetto, le dichiarazioni possono essere sovrascritte se dichiarate esplicitamente.
//FixedCalculator.ts
export * from "./Calculator"
import Operator from "./Calculator";
export class Add implements Operator {
eval(a: number, b: number): number {
return 42;
}
}
Esempio di utilizzo
//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