TypeScriptのジェネリクスを使うと、関数の型の決定を遅延することが出来ます。

元々、型を定義付けるのは、その変数や関数が、特定の型の値だけが付与されることを、

保証するものですが、

コーディングをしていると、型定義するときは、どんな型が欲しいかは保留にしておいて、

呼び出すときに型を指定してもらいたいという局面があるかもしれません。

では、どのように関数の型の決定を遅延させるのでしょうか？

今回の記事では、第三弾として、複数のジェネリクスという観点で記事をお届けします。

＊過去の記事はこちら

OFF.TOKYO：プログラミング課題を抱えてる人を助けるWebブログ

2021.03.27

【Generics】TypeScriptの高度な型 ジェネリクスは？ ① 変数の ジェネリクス

https://off.tokyo/blog/generics-typescript

【Generics】TypeScriptの高度な型 ジェネリクスは？ ① 変数の ジェネリクスTypeScriptにはGenericsと呼ばれる高度な型を定義することができます。 元々、型を定義付けるのは、その変数や関数が、特定の型の値だけが付与されることを、 保証するものですが、 コーディングをしていると、型定義するときは、どんな型が欲しいかは保留にしておいて、 呼び出すときに型を指定してもらいたいという局面があるかもしれません。 つまり、TypeScriptのGenericsを使うと、型定義を遅延することができます。 実際...

OFF.TOKYO：プログラミング課題を抱えてる人を助けるWebブログ

2021.03.28

【Generics】TypeScriptの高度な型 ジェネリクスは？ ② 関数の ジェネリクス

https://off.tokyo/blog/generics-typescript-2

TypeScriptのジェネリクスを使うと、関数の型の決定を遅延することが出来ます。 元々、型を定義付けるのは、その変数や関数が、特定の型の値だけが付与されることを、 保証するものですが、 コーディングをしていると、型定義するときは、どんな型が欲しいかは保留にしておいて、 呼び出すときに型を指定してもらいたいという局面があるかもしれません。 では、どのように関数の型の決定を遅延させるのでしょうか？ 実際に見ていきましょう。 【Generics】TypeScriptの高度な型 ジェネリクスは？ ②...

keyofによるLookup

下記のように、第二引数のジェネリクスを、第一引数のジェネリクスと関連づけることできます。

第二引数に付与されたK型は、第一引数のプロパティ名称であることが確約されます。

そのため、props[key]が必ず存在する値であることが保証されます。

function pick<T, K extends keyof T>(props: T, key: K){
 return props[key]
}

この関数を利用すると、下記のような型推論を得ることが出来ます。

第二引数にプロパティ名称を指定すると、そのプロパティ型を型推論として導きます。

第二引数に存在しないプロパティ名称を指定すると、コンパイルエラーを得ることが出来ます。

const obj = {
 name: 'Taro',
 amount: 0,
 flag: false
}

const value1 = pick(obj, 'name') //const value1: string
const value2 = pick(obj, 'amount') //const value2: number
const value3 = pick(obj, 'flag') // const value3 boolean