TypeScript
Moduły - eksportowanie i importowanie
Szukaj…
Witaj, świecie!
//hello.ts export function hello(name: string){ console.log(`Hello ${name}!`); } function helloES(name: string){ console.log(`Hola ${name}!`); } export {helloES}; export default hello;
Załaduj za pomocą indeksu katalogu
Jeśli katalog zawiera plik o nazwie index.ts
, można go załadować przy użyciu tylko nazwy katalogu (dla pliku index.ts
nazwa pliku jest opcjonalna).
//welcome/index.ts export function welcome(name: string){ console.log(`Welcome ${name}!`); }
Przykładowe użycie zdefiniowanych modułów
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!
Eksportowanie / importowanie deklaracji
Każda deklaracja (zmienna, stała, funkcja, klasa itp.) Może być eksportowana z modułu w celu zaimportowania do innego modułu.
Maszynopis oferuje dwa typy eksportu: nazwany i domyślny.
Nazwany eksport
// adams.ts export function hello(name: string){ console.log(`Hello ${name}!`); } export const answerToLifeTheUniverseAndEverything = 42; export const unused = 0;
Podczas importowania nazwanych eksportów możesz określić, które elementy chcesz zaimportować.
import {hello, answerToLifeTheUniverseAndEverything} from "./adams"; hello(answerToLifeTheUniverseAndEverything); // Hello 42!
Domyślny eksport
Każdy moduł może mieć jeden domyślny eksport
// dent.ts const defaultValue = 54; export default defaultValue;
które można zaimportować za pomocą
import dentValue from "./dent"; console.log(dentValue); // 54
Import w pakiecie
Maszynopis oferuje metodę importowania całego modułu do zmiennej
// 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
Ponowny eksport
Maszynopis pozwala na reeksport deklaracji.
//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;
}
}
Możesz połączyć wszystkie operacje w jedną bibliotekę
//Operators.ts
import {Add} from "./Add";
import {Mul} from "./Mul";
export {Add, Mul};
Nazwane deklaracje mogą być ponownie eksportowane przy użyciu krótszej składni
//NamedOperators.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
Można również eksportować domyślny eksport , ale nie jest dostępna krótka składnia. Pamiętaj, że możliwy jest tylko jeden domyślny eksport na moduł.
//Calculator.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
import Operator from "./Operator";
export default Operator;
Możliwy jest ponowny eksport importu pakietowego
//RepackedCalculator.ts
export * from "./Operators";
Podczas ponownego eksportowania pakietu deklaracje mogą zostać zastąpione, jeśli zostaną wyraźnie zadeklarowane.
//FixedCalculator.ts
export * from "./Calculator"
import Operator from "./Calculator";
export class Add implements Operator {
eval(a: number, b: number): number {
return 42;
}
}
Przykład użycia
//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