💚
【TypeScript】覚えておきたいUtility Types
Utility Typesとは
Utility Typesは、既存の型を元に新しい型を生成するためのユーティリティ集合です。
使用することで、より複雑な型定義を簡単に表現することができます。
ReturnType<T>
- 与えられた関数型の戻り値の型を取得する
- 関数が複雑になってきたときなど、戻り値の型を手動で指定するのは大変なときに使用すると便利。
- 関数の戻り値が正確に指定される
index.tsx
const greet = (name: string): string => {
return `Hello, ${name}!`;
}
type GreetReturnType = ReturnType<typeof greet>;
Readonly<T>
- オブジェクトのすべてのプロパティを読み取り専用に変換する（変更できないようにする）
- オブジェクトや配列などの変更不能なリソースを宣言することができるので、誤った変更を行ってしまうことを防止することができる。
index.tsx
type Person = {
name: string;
age: number;
};
const person: Readonly<Person> = {
name: "taro",
age: 30,
};
person.name = "hoge"; // エラー：プロパティ 'name' は読み取り専用です
person.age = 31; // エラー：プロパティ 'age' は読み取り専用です
Partial<T>
- オブジェクトの一部のプロパティがオプションとなるような型を定義するために使用
- プロパティを省略できるため型定義の柔軟性が向上する
index.tsx
type Person = {
name: string;
age: number;
address: {
city: string;
street: string;
};
};
const updatePerson = (person: Partial<Person>): void => {
console.log(person);
};
updatePerson({ name: "taro" });
Required<T>
- すべてのプロパティを必須にした新しい型を作成する
index.tsx
type Person = {
name?: string;
age?: number;
address?: string;
};
type RequiredPerson = Required<Person>;
Pick<T,K>
- オブジェクト型から特定のプロパティを抽出した新しいオブジェクト型を作成する
- 第１引数に対象となる型、第２引数に欲しい型を入れる
index.tsx
type Person = {
name: string;
age: number;
address: string;
email: string;
};
type PersonNameAndEmail = Pick<Person, "name" | "email">;
const person: Person = {
name: "hoge",
age: 28,
address: "Tokyo",
email: "hoge@example.com",
};
const personNameAndEmail: PersonNameAndEmail = {
name: person.name,
email: person.email,
};
console.log(personNameAndEmail);
Omit<T,K>
- Pickの逆
- オブジェクト型から指定したプロパティを削除した新しい型を生成する
index.tsx
type OriginalType = {
prop1: string;
prop2: number;
prop3: boolean;
};
type OmittedType = Omit<OriginalType, "prop2">;
Extract<T,U>
- 第一引数と第二引数から互換性のある型だけを残して新しい型を生成する
index.tsx
type Person = {
name: string;
age: number;
}
type Employee = {
id: number;
name: string;
}
type CommonProperties = Extract<keyof Person, keyof Employee>;
// CommonPropertiesは'name'
Exclude<T,U>
- Extractの反対
- 第一引数と第二引数から互換性のない型だけを残して新しい型を生成する
index.tsx
type Person = {
name: string;
age: number;
}
type Employee = {
id: number;
name: string;
}
type CommonProperties = Exclude<keyof Person, keyof Employee>;
// CommonPropertiesは'age'
NonNullable<T>
- nullとundefinedを取り除いた型を生成する
index.tsx
type NullableType = string | null | undefined;
type NonNullableType = NonNullable<NullableType>;
// NonNullableTypeはstring
Record<K, T>
- 指定された型のプロパティを持つ新しいオブジェクト型を作成する
- 第一引数にキーの型、第二引数に値の型を取る
index.tsx
type User = {
name: string;
age: number;
};
type UserRecord = Record<string, User>;
const users: UserRecord = {
user1: { name: "foo", age: 23 },
user2: { name: "bar", age: 31 },
};
Parameters<T>
- 関数のパラメータのタプル型を取得する
index.tsx
const greet = (name: string, age: number) => {
console.log(`Hello, ${name}! You are ${age} years old.`);
};
type GreetParams = Parameters<typeof greet>;
文字列操作のUtility Types
index.tsx
// StringのLiteral TypesをUppercaseにする
type Foo = Uppercase<"foo">;
// StringのLiteral TypesをLowercaseにする
type Foo = Lowercase<"foo">;
// StringのLiteral TypesをCapitalizeにする
type Foo = Capitalize<"foo">;
// StringのLiteral TypesをUncapitalizeにする
type Foo = Uncapitalize<"Foo">;
Discussion