typescript basic #4 export と import について

引き続き、typescriptを学んでいきます！

今回は、export とimport について

export とimport について

external.ts

export const memberName = "tanaka";

export することで他のファイルで使用できるようになります。

import { memberName } from "./external";

console.log(memberName);

import でエクスポートされた要素を読み込むことで使用できます。

export function add(num1: number, num2: number): number {
    return num1 + num2;
}

export default class Human {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

関数やクラスもexport できます。

import { add, Human } from "./external";

console.log(add(4, 2));

let human = new Member('suzuki', 20);
console.log(human.name, human.age)

import はこんな感じですね。

export default について

export const memberName = "tanaka";

export function add(num1: number, num2: number): number {
    return num1 + num2;
}

export default class Human {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

export に対して、default と設定することができます。

今回はHuman にdefault 設定してみました。

default 設定した要素をimport するときは、

import Human, { memberName, add } from "./external";

{ } の外に宣言する必要があります。

また、default でexport されたものに関しては、同じ名前ではなく、

他の名前でimport することも可能です

import Member, { memberName, add } from "./external";

Member という名前でHumanクラスをimport してみました。

defualt 設定は、1ファイルにつき１つまで設定することができないのは注意

関数の型について学びたい方はこちら

typescriptのコンパイル方法から学びたいかたはこちら。