mosya

mosya<TC> - 第2引数で指定したキーを除外した型を返す型を実装しようの解説

この記事はmosya<TC>の問題の一つであるMyOmit型の解説になります。

問題

組み込みの型ユーティリティOmit<T, K>を使用せず、TのプロパティからKを削除する型を実装します。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = MyOmit<
  Todo,
  "description" | "title"
>;

const todo: TodoPreview = {
  completed: false,
};

前提知識

この問題を解くにあたって型についての以下の知識を理解しておく必要があります。

  1. Conditional Typesを理解する
  2. Mapped Typesを理解する
  3. インデックスアクセス型を理解する
  4. 便利な組み込み型Excludeを理解する

Conditional Typesを理解する

Conditional Typesは、条件によって型を変更することができる機能です。

例えば、以下のような型が考えられます。

type Foo<T> = T extends string
  ? string
  : number;

この型は、Tstring型を継承している場合はstring型を、そうでない場合はnumber型を返します。

このように、extendsを使って条件を指定することで、型を変更することができます。

Mapped Typesを理解する

Mapped Typesはユニオン型を使って、新しいオブジェクトの型を生成する機能です。

例えば、以下のようなユニオン型があったとします。

type TodoKeys = "title" | "description";

このユニオン型を使って、以下のようなオブジェクトの型を生成することができます。

type Todo = {
  [K in TodoKeys]: string;
};

// 以下のように展開される
type Todo = {
  title: string;
  description: string;
};

インデックスアクセス型を理解する

インデックスアクセス型は、オブジェクトのプロパティにアクセスするための機能です。

例えば、以下のようなオブジェクトがあったとします。

interface Todo {
  title: string;
  description: string;
}

このオブジェクトのプロパティにアクセスするには、以下のようにします。

type Title = Todo["title"]; // string

このように、Todo["title"]とすることで、Todotitleプロパティの型を取得することができます。
これをインデックスアクセス型と呼びます。

先ほど登場したMapped Typesと組み合わせることで、一つずつオブジェクトのプロパティにアクセスすることができます。

便利な組み込み型 Exclude を理解する

Excludeは、ユニオン型から特定の型を除外することができる便利な組み込み型です。

例えば、以下のようなユニオン型があったとします。

type Foo = string | number | boolean;

このユニオン型からstring型を除外するには、以下のようにします。

type Bar = Exclude<Foo, string>; // number | boolean

解答例

以上の知識を使って、以下のように解答することができます。

type MyOmit<T, K> = {
  [P in Exclude<keyof T, K>]: T[P];
};
  • まず、Exclude<keyof T, K>で、TのプロパティのキーからKを除外します。
  • 除外されたキーを使ってMapped Typesを使い、新しいオブジェクトの型を生成します。
  • T[P]で、インデックスにアクセスして、Tのプロパティの型を取得します。

Authored by

筆者の写真

Godai@steelydylan

Webサービスを作るのが好きなWebエンジニア。子供が産まれたことをきっかけに独立し法人化。サービス開発が大好き。
好きな言語はTypeScript。

ReactやTypeScriptなどの周辺技術が学べる
オンライン学習サービスを作りました!

詳しくはこちら
mosya

mosyaはオンラインでHTML,CSS,JavaScriptを基本から学習できるサービスです。現役エンジニアが作成した豊富なカリキュラムに沿って学習を進めましょう。

© 2023 - mosya. All rights reserved.