mosya
mosya Business はこちら

mosya<TC> - オブジェクトにキーとバリューを追加する型を作ろうの解説

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

問題

インターフェースに新しいフィールドを追加する型を実装します。この型は、3 つの引数を受け取り、新しいフィールドを持つオブジェクトを出力しなければなりません。

例えば、以下のようなコードを満たすように実装しましょう。

type Test = { id: "1" };
type Result = AppendToObject<
  Test,
  "value",
  4
>; // expected to be { id: '1', value: 4 }

解答例

type AppendToObject<
  T extends {},
  U extends string,
  V
> = {
  [k in keyof T | U]: k extends keyof T
    ? T[k]
    : V;
};
  1. T extends {}という条件を指定し、Tがオブジェクト型であることを制約します。
  2. Uは、追加するフィールドの名前なので、U extends stringという条件を指定し、Ustring型に制約します。
  3. Vは、追加するフィールドの値なので、Vはそのまま返すので、制約はありません。
  4. [k in keyof T | U]という型を指定し、TのフィールドとUを合わせたフィールドをオブジェクトのフィールドとして指定します。
  5. k extends keyof T ? T[k] : Vという条件を指定し、kTのフィールドにある場合は、そのフィールドの値を返し、そうでない場合は、Vを返します。

Authored by

筆者の写真

Godai@steelydylan

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

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

詳しくはこちら
mosya

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

© 2023 - mosya. All rights reserved.