スポンサーリンク
引き続き、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のコンパイル方法から学びたいかたはこちら。
