
こんにちは!フロントエンジニアのH.Rです。TypeScriptで型を定義するときに、「一部だけ取り出したい」「全部をオプショナルにしたい」といった場面がよくあります。
そんなときに役立つのがユーティリティ型(Utility Types)です。
この記事では代表的なユーティリティ型をまとめました。
TypeScriptで知っておきたいユーティリティ型9選
TypeScriptには、型を自在に操作できる「ユーティリティ型」が用意されています。
これを使いこなせると、型定義がぐっと柔軟になり、コードの安全性も保ちやすくなります。
今回は実務でよく使う9つのユーティリティ型を紹介します。
基本となる型定義(共通型)
まずは、この記事で使う共通の型 User を定義しておきます。
type User = { id: number; name: string; email: string; }
Omit<T, K> — 指定したプロパティを除外する
APIに送るときに「IDはサーバ側で付与されるので不要」という場合に便利です。
// email を除外 type UserWithoutEmail = Omit<User, 'email'>; // => { // id: number; // name: string; // }
Pick<T, K> — 必要なプロパティだけを抽出
フォーム入力など、必要な情報だけに絞りたいときに役立ちます。
type UserName = Pick<User, 'name'>; // => { // name: string; // }
Partial<T> — プロパティをすべてオプショナルに
更新処理(PATCHリクエスト)で「変更した部分だけ送る」ケースに便利です。
type PartialUser = Partial<User>; // => { // id?: number; // name?: string; // email?: string; // }
Required<T> — プロパティをすべて必須に
APIレスポンスを厳密にチェックしたいときに使えます。
type OptionalUser = { id?: number; name?: string; }; type StrictUser = Required<OptionalUser>; // => { // id: number; // name: string; // }
Readonly<T> — プロパティを読み取り専用に
不変データ(Immutable)を扱うときに便利です。 ※オブジェクトの中身までは深く凍結されません。
type FrozenUser = Readonly<User>; // => { // readonly id: number; // readonly name: string; // readonly email: string; // }
Record<K, T> — キーと値の型をまとめる
マッピングデータをまとめたいときに使います。
type Roles = 'admin' | 'user'; type RolePermissions = Record<Roles, boolean>; // => { // admin: boolean; // user: boolean; // }
Exclude<T, U> — ユニオン型から不要な型を除外
特定の値を除外して型を絞ることができます。
type Roles = 'admin' | 'user' | 'guest'; type NonGuest = Exclude<Roles, 'guest'>; // => "admin" | "user"
Extract<T, U> — ユニオン型から共通部分だけ抽出
複数の型から共通の値だけを取り出せます。
type Staff = Extract<Roles, 'admin' | 'user'>; // => "admin" | "user"
NonNullable<T> — null と undefined を除外
必ず値が入っていることを保証したい場合に便利です。
type MaybeName = string | null | undefined; type Name = NonNullable<MaybeName>; // => string
まとめ
今回紹介したTypeScriptのUtility Typesを使うことで、既存の型から新しい型を効率的に作ることができます。 ぜひ覚えてみてください!
終わりに
KENTEMでは、様々な拠点でエンジニアを大募集しています! 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。