TypeScript - export/import
公開日:2019-02-11 更新日:2019-05-14
1. 概要
export/importを使って、他のファイルのクラスや関数などを使えるようにします。
export class クラス名 {}
export function 関数名() {}
export let 変数名;
export const 変数名;
export type 型名 = {};
export {関数名, クラス名, 変数名, ・・・};
export {関数名 as 別名, クラス名 as 別名, ・・・};
import * as 別名 from "パス";
import { 関数名, クラス名, 変数名, ・・・ } from "パス";
2.1 サンプル - 関数
フォルダ構成
fileUtils.ts
app.ts
import の直後に使いたい関数名、from の後ろに拡張子を除いたファイルのパスを指定します。
├─commons
│ └─utils
│ └─fileUtils.ts
└─app.ts
app.ts から fileUtils.ts の関数を使ってみます。fileUtils.ts
//先頭に export を付ける
export function getFiles(path: string): string[] {
let list = ["c:/test.txt", "c:/abc.txt"];
return list;
}
他のファイルで使用する関数やクラス名の前に、export を付けます。app.ts
import { getFiles } from "./commons/utils/fileUtils";
let list = getFiles("c:/");
for (let path of list) {
console.log(path);
}
他のファイルの関数を使いたい場合は、import で指定します。import の直後に使いたい関数名、from の後ろに拡張子を除いたファイルのパスを指定します。
c:/test.txt
c:/abc.txt
2.2 サンプル - クラス
2.1 と同じフォルダ構成にします。
fileUtils.ts
また、メソッドには public を付けます。
private にすると、外部からはアクセスできなくなります。
app.ts
fileUtils.ts
export class FileUtils {
public static getFiles(path: string): string[] {
let list = ["c:/test.txt", "c:/abc.txt"];
return list;
}
}
クラスに export を付ける。メソッドには付けない。また、メソッドには public を付けます。
private にすると、外部からはアクセスできなくなります。
app.ts
import { FileUtils } from "./commons/utils/fileUtils";
let list = FileUtils.getFiles("c:/");
for (let path of list) {
console.log(path);
}
インポートでクラスを指定する。2.3 サンプル - 別名
インポート時に、クラス名に別名を付けて使用することができます。
2.2 と同じフォルダ構成、fileUtils.ts にします。
app.ts
既存のクラス名などとバッティングする場合や、抽象的な名前を付けてモジュールを切り替えをしやすくするためなどに使います。
2.2 と同じフォルダ構成、fileUtils.ts にします。
app.ts
import { FileUtils as FUtils} from "./commons/utils/fileUtils";
let list = FUtils.getFiles("c:/");
for (let path of list) {
console.log(path);
}
インポート時に as で別名を付けられます。既存のクラス名などとバッティングする場合や、抽象的な名前を付けてモジュールを切り替えをしやすくするためなどに使います。
2.4 サンプル - 複数の関数
2.1 と同じフォルダ構成にします。
fileUtils.ts
また、以下のように * に別名を付けて、まとめてインポートすることもできます。
但し、この場合、関数名の前に別名を付ける必要があります。
app.ts
fileUtils.ts
function getFiles(path: string): string[] {
let list = ["c:/test.txt", "c:/abc.txt"];
return list;
}
function getDirs(path: string): string[] {
let list = ["c:/test.txt", "d:/"];
return list;
}
//各function の前に export を付けても良いし、
//まとめて export を指定することもできます。
export { getFiles, getDirs }
getFiles() と getDirs() をエクスポートします。import { getFiles, getDirs } from "./commons/utils/fileUtils";
let list1 = getFiles("c:/");
let list2 = getDirs("");
インポート時に使いたい関数を全て指定します。また、以下のように * に別名を付けて、まとめてインポートすることもできます。
但し、この場合、関数名の前に別名を付ける必要があります。
app.ts
import * as FUtils from "./commons/utils/fileUtils";
let list1 = FUtils.getFiles("c:/");
let list2 = FUtils.getDirs("");
2.5 サンプル - 複数のファイルをまとめてエクスポート
複数ファイルをまとめてエクスポートすることにより、
1回のインポートで複数ファイルのインポートが行えます。
フォルダ構成
all.ts
利用者は、all.ts だけインポートします。
fileUtils.ts
stringUtils.ts
app.ts
別名の Utils で、複数ファイルの関数にアクセスできるようになります。
1回のインポートで複数ファイルのインポートが行えます。
フォルダ構成
├─commons
│ └─utils
│ ├─all.ts
│ ├─fileUtils.ts
│ └─stringUtils.ts
└─app.ts
all.ts
export * from "./fileUtils";
export * from "./stringUtils";
fileUtils.ts と stringUtils.ts をまとめます。利用者は、all.ts だけインポートします。
fileUtils.ts
export function getFiles(path: string): string[] {
let list = ["c:/test.txt", "c:/abc.txt"];
return list;
}
stringUtils.ts
export function append(s1: string, s2: string): string {
return s1 + s2;
}
app.ts
import * as Utils from "./commons/utils/all";
let list1 = Utils.getFiles("c:/");
let s = Utils.append("abc", "def");
all.ts をインポートすると、別名の Utils で、複数ファイルの関数にアクセスできるようになります。