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 basic #3 関数の型について 今回もtypescriptを勉強していきます！ 今回は、関数の型について void 返り値のない関数...

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

typescript #2 コンパイル方法の確認と、オブジェクトの型確認 typescript を基礎からしっかりと学習してみようかなと思いまして動画を撮影してみました。 今回は、typescriptの...