TypeScript インターフェースの整理: コードの可読性を向上させる
TypeScript インターフェースの整理方法
そこで、ここでは TypeScript インターフェースを整理するためのいくつかの方法を紹介します。
インターフェースをファイルに分割する
インターフェースの数が増えてくると、一つのファイルにまとめて管理するのは難しくなります。そこで、インターフェースを機能ごとに分割して、複数のファイルに保存しましょう。
例えば、以下のように、User インターフェースと Product インターフェースを別のファイルに保存できます。
// user.ts
export interface User {
name: string;
email: string;
age: number;
}
// product.ts
export interface Product {
name: string;
price: number;
description: string;
}
インターフェースの名前が重複する可能性がある場合は、名前空間を使って整理できます。
例えば、以下のように、app 名前空間と api 名前空間を使ってインターフェースを整理できます。
// app.ts
export namespace app {
export interface User {
name: string;
email: string;
}
}
// api.ts
export namespace api {
export interface Product {
name: string;
price: number;
}
}
インターフェースを拡張することで、コードの重複を減らすことができます。
例えば、以下のように、BaseUser インターフェースを拡張して User インターフェースを作成できます。
// base-user.ts
export interface BaseUser {
name: string;
email: string;
}
// user.ts
export interface User extends BaseUser {
age: number;
}
インターフェースのエイリアスを使う
長いインターフェースの名前を短くするために、エイリアスを使うことができます。
例えば、以下のように、User インターフェースのエイリアスとして U を定義できます。
export interface User {
name: string;
email: string;
age: number;
}
type U = User;
const user: U = {
name: "John Doe",
email: "[email protected]",
age: 30,
};
ツールを使う
インターフェースの整理を自動化してくれるツールもあります。
例えば、Visual Studio Code: https://code.visualstudio.com/ の TSLint: https://palantir.github.io/tslint/ 拡張機能は、インターフェースの命名規則やファイルの整理に関するルールを設定できます。
これらの方法を組み合わせることで、TypeScript インターフェースを分かりやすく整理することができます。
プロジェクトの規模や目的に合わせて、最適な方法を選択してください。
// ファイル分割
// user.ts
export interface User {
name: string;
email: string;
age: number;
}
// product.ts
export interface Product {
name: string;
price: number;
description: string;
}
// 名前空間
// app.ts
export namespace app {
export interface User {
name: string;
email: string;
}
}
// api.ts
export namespace api {
export interface Product {
name: string;
price: number;
}
}
// インターフェースの拡張
// base-user.ts
export interface BaseUser {
name: string;
email: string;
}
// user.ts
export interface User extends BaseUser {
age: number;
}
// インターフェースのエイリアス
// user.ts
export interface User {
name: string;
email: string;
age: number;
}
type U = User;
const user: U = {
name: "John Doe",
email: "[email protected]",
age: 30,
};
// ツール
// Visual Studio Code の TSLint 拡張機能
// https://code.visualstudio.com/
// https://palantir.github.io/tslint/
その他の TypeScript インターフェースの整理方法
ドキュメントコメントを使う
インターフェースの各プロパティについて、説明を追加することができます。
/**
* ユーザーを表すインターフェース
*/
export interface User {
/**
* ユーザーの名前
*/
name: string;
/**
* ユーザーのメールアドレス
*/
email: string;
/**
* ユーザーの年齢
*/
age: number;
}
定数をインターフェースの代わりに使う
単純な値の集合を表す場合は、インターフェースの代わりに定数を使うことができます。
export const UserStatus = {
Active: "active",
Inactive: "inactive",
};
export type User = {
name: string;
email: string;
status: UserStatus;
};
型エイリアスを使う
複雑な型を再利用したい場合は、型エイリアスを使うことができます。
type User = {
name: string;
email: string;
age: number;
};
type Product = {
name: string;
price: number;
description: string;
};
// User 型と Product 型を使って新しい型を定義
type Order = {
user: User;
product: Product;
};
typescript
