typescript の基本的な Utility type についてまとめてみる

Partial と Required

プロパティを 任意にしたり、必須にしたりする型。Partial (部分的)と Required(必須) という意味

type User = {
id: number;
name: string;
age: number;
};

type PartialUser =  Partial<User>
// 型は以下のようになる
type PartialUser = {
    id?: number | undefined;
    name?: string | undefined;
    age?: number | undefined;
}

type RequiredlUser =  Required<User>
// 型は以下のようになる
type RequiredlUser = {
    id: number;
    name: string;
    age: number;
}

Pick と Omit

特定のプロパティを取り出したり取り除いたりする型。Pick (選ぶ)と Omit(省く) という意味

type User = {
id: number;
name: string;
age: number;
};

type PickUser = Pick<User, "id" | "name">;
// 型は以下のようになる
type PickUser = {
    id: number;
    name: string;
}

type OmitUser = Omit<User, "id" | "name">;
// 型は以下のようになる
type OmitUser = {
    age: number;
}

Extract と Exclude

特定の型を抽出したり除外したりする型。Extract (抽出する)と Exclude(除外する) という意味

type T = string | number | boolean;

type Excluded = Exclude<T, boolean>;
// type Excluded = string | number
;
type Extracted = Extract<T, string | number>;
// type Extracted = string | number

Parameters と ReturnType

関数の引数の型を取得するのと、関数の戻り値の型を取得します。Parameter (引数)と Return(戻り値) という意味

type Greet = (name: string, age: number) => string;
type Params = Parameters<Greet>;
// type Params = [string, number]

const greetParams: Params = ["Hoge", 30];

type Result = ReturnType<Greet>;
// type Result = string

const greetResult: Result = "Hello, Hoge!";

Readonly

すべてのプロパティを読み取り専用にします。

type User = {
  name: string;
  age: number;
};

const readonlyUser: Readonly<User> = {
  name: "Hoge",
  age: 35
};
// readonlyUserのプロパティは変更不可
// readonlyUser.name = "Bob"; // エラー: Cannot assign to 'name' because it is a read-only property.

まとめ

対になっている型や、日本語の意味を整理することでより理解が深まりました。