Genericsの型引数が複数あるパターン

Genericsの型引数が複数あるパターン

以下のようにカンマ区切りで記述する。

const foo = <T, K, U>( foo: T, bar: K, baz: U) => {
  return {};
}

また、以下のように型引数それぞれに初期値やextendsの制約を付け加えることも出来る。

const foo = <T extends string, K extends number, U = boolean>( foo: T, bar: K, baz: U) => {
  return {};
}

Lookup Types

以下のようにT[K]の構文で記述する。

const foo = <T extends string, K extends number, U = boolean>( foo: T, bar: K, baz: U) => {
  return {};
}

type Obj = {
  a: number
  b: boolean
}

type Foo = Obj["a"]

GenericsとLookup Typesが合わさったパターン

第一引数のTは第二引数で用いることができる。 extendsとkeyofを用いて、オブジェクトTのkeyをKに制約している。 それにより、Lookup Typesのobj[key]でエラーが出なくなる。

const getProperty = <T, K extends keyof T>( obj: T, key: K) => {
  return obj[key];
}

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
}

const hoge = getProperty(obj, "bar")
// const hoge: number

また、setPropertyまた、の例として以下のように記述する。 第三引数にvalue: T[K]とすることで、valueはnumber型となる。

const getProperty = <T, K extends keyof T>( obj: T, key: K) => {
  return obj[key];
}

const setProperty = <T, K extends keyof T>( obj: T, key: K, value: T[K]) => {
  obj[key] = value;
}

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
}

const hoge = getProperty(obj, "bar")

setProperty(obj, "bar", 100);

JavaScriptで用いられるGenerics

map関数

map関数の場合、以下のように型推論が上手く動いている。 map自体がGenericsになっていて、暗黙的な型解決でうまく推論してくれている。