TypeScriptのexport type解説
2024-10-17
例えば、次のコードでは、Personという型を定義し、それをexport typeを使ってエクスポートしています。
export type Person = {
name: string;
age: number;
};
他のモジュールでは、このPerson型をインポートして使用することができます。
import { Person } from './person';
const john: Person = {
name: 'John Doe',
age: 30
};
TypeScriptのexport type解説とコード例
export typeとは？
TypeScriptのexport typeは、型定義を他のモジュールから再利用可能にするためのキーワードです。これにより、コードのモジュール化と再利用性を向上させることができます。
コード例
型の定義とエクスポート
// person.ts
export type Person = {
name: string;
age: number;
};
export typeを使って、この型を他のモジュールからインポートできるようにします。Personという名前の型を定義します。
型のインポートと使用
// main.ts
import { Person } from './person';
const john: Person = {
name: 'John Doe',
age: 30
};
Person型を使って、johnという変数を定義します。person.tsからPerson型をインポートします。
具体的な使い方
インターフェースのエクスポート
export interface Animal {
name: string;
makeSound(): void;
}
ジェネリック型のエクスポート
export type Maybe<T> = T | null | undefined;
型エイリアスのエクスポート
export type Age = number;
- モジュール化
型定義をモジュールに分割することで、コードの構造を改善することができます。 - 型安全
TypeScriptの型システムを活用して、コードのエラーを早期に検出することができます。 - コードの再利用性
型定義を他のモジュールで再利用できるため、コードの重複を減らすことができます。
インターフェースは、型定義を定義するための別の方法です。export typeと同様に、インターフェースも他のモジュールからインポートして使用することができます。
export interface Person {
name: string;
age: number;
}
型エイリアスは、既存の型に別の名前を割り当てるための方法です。これにより、コードの可読性を向上させることができます。
export type Person = {
name: string;
age: number;
};
ジェネリック型は、型パラメータを受け取る型定義です。これにより、より柔軟な型定義を作成することができます。
export type Maybe<T> = T | null | undefined;
ユーティリティ型の使用
TypeScriptには、さまざまなユーティリティ型が提供されています。これらを組み合わせて、独自の型定義を作成することもできます。
import { Partial } from 'type-fest';
export type PartialPerson = Partial<Person>;
カスタム型ガードの使用
カスタム型ガードは、値が特定の型であるかどうかを判定するための関数です。これを使用して、型定義をより細かく制御することができます。
function isPerson(obj: any): obj is Person {
return typeof obj.name === 'string' && typeof obj.age === 'number';
}
どの方法を選ぶべきか？
最適な方法は、プロジェクトの要件と個人の好みによって異なります。一般的に、以下のようなガイドラインが適用されます。
- 複雑な型定義が必要な場合
ユーティリティ型またはカスタム型ガードを使用します。 - 柔軟な型定義が必要な場合
ジェネリック型を使用します。 - 既存の型に新しい名前を割り当てる場合
型エイリアスを使用します。 - シンプルな型定義の場合
export typeまたはインターフェースを使用します。
javascript typescript
