フロントエンド入門者へおすすめ動画&書籍おすすめ!

TypeScript

【Generics】TypeScriptの高度な型 ジェネリクスとは? ③ 複数ジェネリクス

2021年3月28日

0
0

 

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

 

Pocket
LinkedIn にシェア

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-TypeScript

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.