TypeScript - インターフェイスから型を構築する

TypeScript でインターフェイスと型を作成するときは、より慎重になる必要があります.緩く型付けされたインターフェースを定義する場合、それはどのインターフェースとも違いはありません.

例えば:

interface Folder {
   id?: string;
   name: string;
   description: string;
   isMarkedFavorite?: boolean;
}

上記のインターフェースを使用して、4 つの異なるインターフェースを作成できます.

名前、説明

名前、説明、ID

名前、説明、isMarkedFavorite

名前、説明、ID、isMarkedFavorite

この種のシナリオは、API の Payload と Response にインターフェイスを使用するときによく発生します.例えば:

フォルダの作成には、名前と説明の 2 つのプロパティのみが必要です.

フォルダが作成されると、フォルダの ID と、ユーザーがそのフォルダをお気に入りとしてマークしたかどうかなどのユーザーの設定が取得されます

通常、ペイロードとレスポンスの場合、開発者は通常同じインターフェースを使用します.代わりに、TypeScript の Pick and Omit ユーティリティを使用して、新しいインターフェイスを作成できます.

interface BaseFolder {
   id: string;
   name: string;
   description: string;
   isMarkedFavorite: boolean;
}

type FolderPayloadV1 = Omit<BaseFolder, "id" | "isMarkedFavorite">;
type FolderPayloadV2 = Pick<BaseFolder, "name" | "description">;

Partial を使用して、BaseFolder のすべてのプロパティをオプションにすることもできます.

interface BaseFolder {
   id: string;
   name: string;
   description: string;
   isMarkedFavorite: boolean;
}

type FolderPayloadV3 = Partial<BaseFolder>

// Equivalent would be
{
   id?: string;
   name?: string;
   description?: string;
   isMarkedFavorite?: boolean;
}

開発者として、インターフェイスの設計に十分な時間を割けば、開発パターンも形作られます. TypeScript に入力すると、目に見えない多くの方法で開発バグを軽減できます. API が 4 つのプロパティを返すことが期待されており、for プロパティのうちの 1 つが別の API ソースから取得されることが期待されることを開発者が知っていた場合と同様に、開発者は不要なバグを回避できます.

ハッピーコーディング!

EverydayJavaScript という小さな YouTube チャンネルを運営しています.私の目標は、年末までに 10000 人の加入者に到達することです.私のチャンネルを購読してください.
申し込む: