TypeScript
モジュール - 輸出入

Hello worldモジュール

//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!

宣言のエクスポート/インポート

宣言（変数、const、関数、クラスなど）は、モジュールからエクスポートして他のモジュールにインポートすることができます。

Typescriptには、名前付きとデフォルトの2種類のエクスポートがあります。

名前付きエクスポート

// 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!

デフォルトエクスポート

各モジュールは1つのデフォルトエクスポートを持つことができます

// dent.ts
const defaultValue = 54;
export default defaultValue;

これは、

import dentValue from "./dent";
console.log(dentValue);        // 54

バンドルされたインポート

Typescriptはモジュール全体を変数にインポートするメソッドを提供します

// 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

再輸出

Typescriptでは、宣言を再エクスポートできます。

//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";

デフォルトのエクスポートもエクスポートできますが、短い構文は使用できません。モジュールごとに1つのデフォルトエクスポートしか可能でないことを覚えておいてください。

//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