概要

オンラインサロン IT_KINGDOM で、typescript について学んだことを備忘録としてメモしていきます。

学習内容

Generics とは
初期値の設定
extends による型の制約
関数の Generics による型推論
Generics における複数の型引数
LookupTypes（ルックアップ型）
javascript メソッドでの Generics の活用

Generics とは

Generics とは、あらかじめ抽象的な型指定を行うこと

最初の型指定を<T>とすることで、後でTに任意の型を指定できる(Tは任意の文字列で OK)

// Genericsの型としてTを宣言し、valueの型にTを指定
export type Foo<T> = {
  value: T;
};
const foo: Foo<number> = {
  // fooでは、Tの型としてnumber型を指定
  value: 3,
};
const foo2: Foo<string> = {
  // foo2では、Tの型としてstring型を指定
  value: "",
};
const foo3: Foo<number[]> = {
  // foo3では、Tの型としてnumber[]型を指定
  value: [1, 2, 3],
};

// UserオブジェクトのプロパティstateをGenericsにする
export type User<T> = {
  name: string;
  state: T;
};

// Japanese型ではstateを東京都 or 大阪府、American型ではCA or NYに制約
type Japanese = User<"東京都" | "大阪府">;
type American = User<"CA" | "NY">;

const user1: Japanese = {
  name: "田中",
  state: "東京都",
};
const user2: American = {
  name: "Jonny",
  state: "CA",
};

初期値の設定

Generics では<T>の初期値となる型を設定できる。

初期値を設定した場合、型宣言時に<T>の具体的な型を指定しなければ、初期値が入る。

// <T>の初期値をstring型に設定
export type Foo<T = string> = {
  value: T;
};
// <T>の型を指定してないため、valueはstring型になる
const foo1: Foo = {
  value: "",
};
// <T>の型をnumber型としたため、valueはnumber型となる
const foo2: Foo<number> = {
  value: 111,
};

extends による型の制約

<T>にextends + 型を追加することで、<T>はextendsで指定されたインターフェースを満たす型のみ取れるようになる。

// Tの型をstring型で制約する
export type Foo<T extends string> = {
  value: T;
};
// string型なのでOK
const foo1: Foo<string> = {
  value: "",
};
// number型はstring型を満たさないためエラー
const foo2: Foo<number> = {
  value: 111,
};
// "bar"はstring型を満たすためOK
const foo3: Foo<"bar"> = {
  value: "bar",
};

また、extendsを使った型制約時も、型の初期値を指定できる

// extendsの初期値の指定
// Tの型をstring型 or number型に制約し、初期値をstring型に設定
export type Foo<T extends string | number = string> = {
  value: T;
};
// 型の初期値はstringを指定されているため、valueはstring型になる
const foo1: Foo = {
  value: "",
};
// numberのためOK
const foo2: Foo<number> = {
  value: 111,
};

extendsで複数の型に制約した際、特定の型のみに依存する機能を用いるとエラーになる。

特定の型に依存する機能を用いたい場合は、型の絞り込みを行う。

function foo<T extends string | number>(arg: T) {
  // toUpperCase()はstringのメソッドなので、stringに絞り込みを行う
  if (typeof arg === "string") {
    return { value: arg.toUpperCase() }; // stringに絞り込みが行われているためOK
  }

  return { value: arg.toUpperCase() }; // argの型がnumberの可能性があるためエラー
}

関数の Generics による型推論

関数の Generics では、関数宣言時に型が明示されていない場合、暗黙的に型推論される

// 暗黙的な型推論
// 引数argの型をGenericsで設定
function foo<T>(arg: T) {
  return { value: arg };
}

// 関数のGenericsの型を推論する
const foo1 = foo<string | null>(""); // 引数の型はstring または nullとなる
const foo2 = foo(1); // 引数の型は暗黙的にnumberとなる
const foo3 = foo([false]); // 引数の型は暗黙的に[boolean]になる

Generics における複数の型引数

Generics の型は、複数指定することができる。(例：<T, K, U>)

// Genericsの型引数を複数持つ
const foo = <T, K, U>(foo: T, bar: K, baz: U) => {
  return {};
};

// 各々の型に対してextendsによる制約をかけることもできる
const foo2 = <T extends string, K extends number, U = boolean>(
  foo: T,
  bar: K,
  baz: U
) => {
  return {};
};

LookupTypes（ルックアップ型）

オブジェクトのプロパティ(key)に対応する値(value)の型にアクセスする型を Lookup Types（ルックアップ型）という。

オブジェクトのプロパティを Generics で指定する場合、extends keyofによる型の制約が必要となる。

type Obj = {
  a: number;
  b: boolean;
};

type Foo = Obj["a"]; // Fooの型はnumberになる

const getProperty = <T, K>(obj: T, key: K) => {
  return obj[key]; // 型Kが型Tのプロパティ(key)として設定されてないため、エラー
};
const getProperty2 = <T, K extends keyof T>(obj: T, key: K) => {
  return obj[key]; // 型Kが型Tのプロパティ(key)として設定されているため、OK
};

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,
};
setProperty(obj, "bar", 100); // obj[bar]の型はnumber型のため、100はOK
setProperty(obj, "bar", "bar2"); // obj[bar]の型はnumber型のため、"bar2"はエラー

javascript メソッドでの Generics の活用

javascript のメソッド(map()など)でも暗黙的に Generics が使われている。

const foo = [1, 2, 3].map((v) => v); // fooの型はnumber[]になる。
const foo2 = [1, 2, 3].map((v) => v.toString()); // foo2の型はstring[]になる。

参考サイト

【TypeScript】Generics(ジェネリックス)を理解する

 サバイバル TypeScript

駆け足エンジニアの記録

 IT Kingdom