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 サンプル - 関数

フォルダ構成
├─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
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
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
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回のインポートで複数ファイルのインポートが行えます。

フォルダ構成
├─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 で、複数ファイルの関数にアクセスできるようになります。