63. モジュール — import と export

プログラムが大きくなったら、ファイルを分けて管理します。公開したい関数や型に export を付け、使う側のファイルで import { 名前 } from "./ファイル名" と書いて取り込みます。export や import を持つファイルはモジュールと呼ばれ、export していないものは外のファイルから見えません。

実務のコードは必ず複数ファイルに分かれており、1ファイル=1モジュールが基本単位です。型だけを取り込みたいときは import type { User } from "./user" と書くと「型としてしか使わない」と明示でき、コンパイル後の JavaScript からはその import が完全に消えます。

つまずきポイントは export の付け忘れと、from に書くパスです。自分のプロジェクト内のファイルは "./user" のように相対パスで書き、拡張子 .ts は付けないのが基本です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// ── user.ts ──
export type User = {
  id: number;
  userName: string;
};

export function createUser(id: number, userName: string): User {
  return { id: id, userName: userName };
}

// ── main.ts ──
// 値(関数)は import、型だけなら import type で取り込む
import { createUser } from "./user";
import type { User } from "./user";

const firstUser: User = createUser(1, "Taro");
console.log(firstUser.userName); // Taro

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗