KENTEM TechBlog

建設業のDXを実現するKENTEMの技術ブログです。

TypeScriptで知っておきたいユーティリティ型9選

こんにちは!フロントエンジニアの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にご興味頂いた方は、是非下記のリンクからご応募ください。

recruit.kentem.jp

career.kentem.jp