TD;LR
最初に、本記事で紹介するUtility Typesの概要をお伝えします。細かい説明は各セクションにコード付きで書いてありますのでご覧ください。
-
Readonly<Type>
- 読み取り専用にします
-
Partial<Type>
- プロパティを任意項目にします
-
Required<Type>
- プロパティを必須項目にします
-
Pick<Type, Keys>
- Keysで指定した型を抽出します
-
Omit<Type, Keys>
- Keysで指定した型「以外」を抽出します
-
Extract<Type, Union>
- UnionTypeに対してExcludedMembersで指定した型を抽出します
-
Exclude<UnionType, ExcludedMembers>
- UnionTypeに対してExcludedMembersで指定した型「以外」を抽出します
-
NonNullable<Type>
- null, undefinedを除外します
-
Parameters<Type>
- 関数の引数の型を返します
-
ReturnType<Type>
- 関数の戻り値の型を返します
Utility Typesとは
公式Documentでは以下のように書かれています。要約すると、「Utility Typesを使うとTypeScriptの型変換を簡単にできるよ」ということです。
TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.
Readonly<Type>
Typeに指定した全てのプロパティを読み取り専用にします
type User = {
name: string;
age: number | null;
country?: "US" | "UK" | "JP";
};
+ const user: Readonly<User> = {
name: 'taro',
age: 32,
};
// エラー: Cannot assign to 'name' because it is a read-only property.
// user.nameは読み取り専用なので上書きすることはできません
user.name = 'hanako';
Partial<Type>
Typeに指定した全てのプロパティをOptional(任意)にします
type User = {
name: string;
age: number | null;
country?: "US" | "UK" | "JP";
};
// 全てのプロパティが任意項目となったためどちらもOK
+ const user1: Partial<User> = {};
+ const user2: Partial<User> = {
+ name: 'hanako',
+ };
Required<Type>
Typeに指定した全てのプロパティを必須にします
type User = {
name: string;
age: number | null;
country?: "US" | "UK" | "JP";
};
// 全てのプロパティが必須項目なので元々任意だったcountryも指定する必要がある
+ const user: Required<User> = {
name: 'taro',
age: 32,
country: 'JP',
};
Pick<Type, Keys>
Typeの中からKeysで選択したプロパティの型をピックアップします
type User = {
name: string;
age: number | null;
country?: "US" | "UK" | "JP";
};
// Userから'name'と'country'をピックアップする。'age'を指定するとエラーになる。
+ const user: Pick<User, 'name' | 'country'> = {
name: 'taro',
country: 'JP',
};
Omit<Type, Keys>
Typeの中からKeysで選択したプロパティの型を「以外」ピックアップします
type User = {
name: string;
age: number | null;
country?: "US" | "UK" | "JP";
};
// Userから'age'「以外」をピックアップする。'age'を指定するとエラーになる。
+ const user: Omit<User, 'age'> = {
name: 'taro',
country: 'JP',
};
Extract<Type, Union>
Excludeとは逆でUnionTypeに対してExcludedMembers型を指定する
type Primitive = string | number | boolean
// OK
const value1: Extract<Primitive, string> = 'aaa';
// NG :string型は指定していないのでエラー
const value2: Extract<Primitive, number | boolean> = 'aaa';
Exclude<UnionType, ExcludedMembers>
UnionTypeに対してExcludedMembersで指定した型を除外します
type Primitive = string | number | boolean
// OK
const value1: Exclude<Primitive, string> = true;
// NG
// stringを除外しているので指定できない
const value2: Exclude<Primitive, string> = 'aaa';
NonNullable<Type>
指定したTypeからnull
とundefined
を取り除きます
type UserA = <string | boolean | undefined> // string | boolean
type UserB = <string | null | undefined> // string
Parameters<Type>
関数の引数の型をタプル型として返します
const func = (num: number, isLoading: boolean, value: string) => {
return ...
};
// [number, boolean, string]
const funcType: Parameters<typeof func> = [1234, true, 'aaaa'];
ReturnType<Type>
関数の戻り値の型を返します
const func = (): string => {
return 'aaa'
};
// string型
const funcType: ReturnType<typeof func> = 'bbb';
参考文献