TypeScript
Модули - экспорт и импорт
Поиск…
Привет, мир
//hello.ts export function hello(name: string){ console.log(`Hello ${name}!`); } function helloES(name: string){ console.log(`Hola ${name}!`); } export {helloES}; export default hello;
Загрузка с использованием индекса каталога
Если каталог содержит файл с именем index.ts
его можно загрузить, используя только имя каталога (для index.ts
имя файла необязательно).
//welcome/index.ts export function welcome(name: string){ console.log(`Welcome ${name}!`); }
Пример использования определенных модулей
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!
Экспорт / Импорт объявлений
Любое объявление (переменная, константа, функция, класс и т. Д.) Может быть экспортировано из модуля для импорта в другом модуле.
Typcript предлагает два типа экспорта: named и default.
Именованный экспорт
// adams.ts export function hello(name: string){ console.log(`Hello ${name}!`); } export const answerToLifeTheUniverseAndEverything = 42; export const unused = 0;
При импорте именованного экспорта вы можете указать, какие элементы вы хотите импортировать.
import {hello, answerToLifeTheUniverseAndEverything} from "./adams"; hello(answerToLifeTheUniverseAndEverything); // Hello 42!
Экспорт по умолчанию
Каждый модуль может иметь один экспорт по умолчанию
// dent.ts const defaultValue = 54; export default defaultValue;
которые могут быть импортированы с использованием
import dentValue from "./dent"; console.log(dentValue); // 54
Вложенный импорт
Typcript предлагает метод для импорта целого модуля в переменную
// 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
Реэкспортировать
В машинописном разрешении можно реэкспортировать декларации.
//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;
}
}
Вы можете объединить все операции в одной библиотеке
//Operators.ts
import {Add} from "./Add";
import {Mul} from "./Mul";
export {Add, Mul};
Именованные декларации могут быть реэкспортированы с использованием более короткого синтаксиса
//NamedOperators.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
Экспорт по умолчанию также может быть экспортирован, но короткий синтаксис недоступен. Помните, что возможен только один экспорт по умолчанию для каждого модуля.
//Calculator.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
import Operator from "./Operator";
export default Operator;
Возможный реэкспорт вложенного импорта
//RepackedCalculator.ts
export * from "./Operators";
При реэкспортировании пакета объявления могут быть переопределены при явном объявлении.
//FixedCalculator.ts
export * from "./Calculator"
import Operator from "./Calculator";
export class Add implements Operator {
eval(a: number, b: number): number {
return 42;
}
}
Пример использования
//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