0Pricing
TypeScript Academy · レッスン

型専用のImportとExport

import typeを使って実行時のオーバーヘッドを避けます。

「型専用のImportとExport」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

型のみのインポートとエクスポート（import type / export type）はTypeScript 3.8で導入され、実行時の依存関係と型だけの依存関係を明示的に制御できるようになりました。

型のみが重要な理由

通常のインポートには実行時コードが含まれることがあります。型だけが必要な場合は、コンパイル後の出力からインポート全体を削除できます。
import { User } from './models'; // includes runtime binding
import type { User } from './models'; // compile-time only, erased

import typeの構文

`import`キーワードの後に`type`を置きます。インポートした名前を値として使用することはできません。
import type { ApiResponse } from './api-types';

function handleResponse(res: ApiResponse<User>): void {
  // ApiResponse used as type annotation only
}

export typeの構文

`export type`を使用して、エクスポートを型のみとして明示します。
// user.types.ts
export type UserId = string;
export type { User, UserRole };

インライン型インポート

TypeScript 4.5以降では、通常のインポート文の中で個々のインポートを型のみとして指定できます。
import { type User, createUser } from './user';
// User is type-only, createUser is a runtime value

循環依存の解消

型のみのインポートは実行時バインディングを作成しないため、循環依存の問題を解消できます。

verbatimModuleSyntax

TypeScript 5.0では`verbatimModuleSyntax`が導入されました。これを有効にすると、バンドラーの混乱を防ぐため、型のみのインポートには必ず`import type`を使用する必要があります。
// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

importsNotUsedAsValues

`importsNotUsedAsValues`コンパイラーオプション（verbatimModuleSyntaxに置き換えられました）は、TypeScriptが未使用の値インポートを処理する方法を制御します。

バンドラーでのメリット

Viteやesbuildなどのバンドラーは、`import type`のマーカーを使用して型のインポートの処理を省略し、ビルド速度を向上させます。

型のみの再エクスポート

実行時モジュールを含めずに型を再エクスポートします。
// public-api.ts
export type { User, UserRole } from './internal-user';
export { createUser } from './internal-user'; // runtime

エラー：import typeを値として使用できません

型のみのインポートを実行時の値として使用すると、コンパイルエラーになります。
import type { User } from './user';
// const u = new User(); // Error — User was imported as type-only

確認問題

通常の`import`ではなく`import type`を使用するのはどのような場合ですか？

まとめ

型のみのインポートとエクスポートには`import type`と`export type`を使用します。これらはコンパイル時に削除され、型ファイルへの実行時依存を防ぎ、verbatimModuleSyntaxが有効な場合に必須となります。

よくある質問

「型専用のImportとExport」レッスンは無料ですか？

はい。「型専用のImportとExport」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「型専用のImportとExport」で何を学びますか？

import typeを使って実行時のオーバーヘッドを避けます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「型専用のImportとExport」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ES Module構文：importとexport
  2. 再エクスポートとBarrelファイル
  3. 型専用のImportとExport
  4. NamespaceとModule：現代的な使い方
← TypeScript Academyに戻る