TypeScriptのReadonly/Partial/Pick/Recordについてまとめる

引き続きTypeScript handbookの英語に苦しみつつ読み進めています。

ちょっとだけ日本語訳にも頼ったりしているけど許してね。

さて、今日はAdvanced TypesのMapped Typeというところに出てくるReadonly/Partial/Pick/Recordという型について。

つい先日やりたいと思っていたことが全部解決したので、自分用メモとしてまとめておきます。

Readonly

これは、既存の型の各プロパティを読み取り専用にしたい時に使う型。定義は以下。

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}

使い方は、

interface SomeType {
    hoge: string;
}

type ReadonlySome = Readonly<SomeType>

これでReadonlySomeは、

{
  readonly hoge: string;
}

と等しくなります。

これは、既存の型の各プロパティをoptionalにしたい時に使う型。定義は以下。

type Partial<T> = {
    [P in keyof T]?: T[P];
}

使い方はReadonlyと変わらないので省略。ちなみに僕はこれがやりたくて、つい先日interfaceを2個書きました。。。

これは既存の型から、一部のプロパティを抜き出した型を作るのに使う型です。定義は以下。

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}

だいぶ型が複雑になってきますね…。使い方は以下。1つ目の型引数には元となる型を渡して、2つ目の型引数には、キーを渡してやります。

interface SomeType {
    hoge: string;
    fuga: string;
    piyo: string;
}

type PickedType = Pick<SomeType, 'fuga' | 'piyo'>

PickedTypeは、

type PickedType = {
  fuga: string;
  piyo: string;
}

となります。

新しい型を定義するための型。(ちょっとうまく説明できない)

定義は以下。

type Record<K extends keyof any, T> = {
    [P in K]: T;
}

使い方は以下。

type SomeType = Record<'hoge' | 'fuga' | 'piyo', string>

↑のようにするとSomeTypeは、

type SomeType = {
  hoge: string,
  fuga: string,
  piyo: string
}

と等しくなります。

実際はkeyofとかと組み合わせて、動的に型を生成するのに使うのかなと思います。

const some = {
    hoge: 1,
    fuga: 2,
    piyo: 3
};

type SomeType = Record<keyof typeof some, string>

こんな感じ？？？

Readonly/Partialあたりは割とすぐ使いどころが出てきそうな感じがした。

あと、副作用として、これくらいのレベルの型の定義を読み解けるようになっておくと、他でも役に立つ気がした。

今日も朝から学びになりましたね。