超便利なTypeScriptの8つのユーティリティ型で効率アップ

TypeScriptはJavaScriptに静的型付けの機能が追加された言語で初学者でも手軽に利用できます。

この記事では、TypeScriptの使いこなすと効率がアップするユーティリティ型を8つ取り上げ、使い方やユースケースを紹介します。
また、コードも一緒に見ていくことでより理解が深まります。

ユーティリティ型とは？

ユーティリティ型は特定の目的に使われる型で、TypeScriptの型定義を手助けしてくれます。

そんな便利なユーティリティ型には、Partial、Readonly、Pick、Required、Record、Omit、Exclude、Extractの8つが存在し、特徴と使い所を解説します。

Partial<T>

特徴

Partial型は、オブジェクトのプロパティをオプションに変換します。これにより、オブジェクト型のプロパティが任意となります。

使い所

オブジェクトの一部を更新する関数の引数や、オプショナルなプロパティを持つオブジェクトを扱う場合に便利です。

interface Profile {
  name: string;
  age: number;
}

function updateProfile(profile: Profile, updates: Partial<Profile>): Profile {
  return { ...profile, ...updates };
}

const profile: Profile = {
  name: "Alice",
  age: 30,
};

const updatedProfile = updateProfile(profile, { age: 31 });

Readonly<T>

特徴

Readonly型は、オブジェクトのプロパティを読み取り専用に変換します。これにより、オブジェクトのプロパティが変更できなくなります。

使い所

変更されては困るデータを扱う際や、関数の引数で変更を禁止したい場合に使用されます。

interface Point {
  x: number;
  y: number;
}

const p1: Readonly<Point> = { x: 10, y: 20 };
p1.x = 30; // Error: 'x' is a read-only property

Pick<T, K>

特徴

Pick型は、オブジェクトから指定したプロパティだけを抜き出すことができます。これにより、必要なプロパティだけのオブジェクト型を簡単に作成できます。

使い所

特定のプロパティを持つ部分オブジェクトを作成したり、特定のプロパティのみを扱う関数の引数として使用する場合に便利です。

interface Profile {
  name: string;
  age: number;
  address: string;
}

type ProfileNameAndAge = Pick<Profile, "name" | "age">;

const profile: ProfileNameAndAge = {
  name: "Alice",
  age: 30,
};

Required<T>

特徴

Required型は、オブジェクトのすべてのプロパティを必須に変換します。これにより、オプショナルなプロパティがあっても、全て必須となります。

使い所

必須のプロパティを持つオブジェクトを扱う場合や、APIから返ってくるオブジェクトで欠けているデータがある場合に便利です。

interface Profile {
  name: string;
  age: number;
  address?: string;
}

type RequiredProfile = Required<Profile>;

const profile: RequiredProfile = {
  name: "Alice",
  age: 30,
  address: "123 Main St", // このプロパティは必須になります
};

Record<K, T>

特徴

Record型は、指定したキーに対して同じ型の値を持つオブジェクトを作成します。これにより、特定のキーの集合に対して値を割り当てたり、オブジェクトのキーを動的に扱うことができます。

使い所

キーと値のペアを持つオブジェクトを扱う場合や、辞書型のデータ構造を表現する際に便利です。

type AnimalType = "cat" | "dog" | "bird";
type AnimalInfo = { name: string; age: number };

const animalMap: Record<AnimalType, AnimalInfo> = {
  cat: { name: "Fluffy", age: 5 },
  dog: { name: "Rex", age: 7 },
  bird: { name: "Tweety", age: 2 },
};

Omit<T, K>

特徴

Omit型は、オブジェクトから指定したプロパティを取り除くことができます。これにより、特定のプロパティを削除したオブジェクト型を簡単に作成できます。

使い所

特定のプロパティを除外したい場合や、一部のプロパティを非公開にしたい場合に活用できます。

interface Profile {
  name: string;
  age: number;
  address: string;
}

type ProfileWithoutAddress = Omit<Profile, "address">;

const profile: ProfileWithoutAddress = {
  name: "Alice",
  age: 30,
};

TypeScript Omit徹底解説: 使い方・実践例で簡単マスター！

TypeScriptのOmit型の使い方や実践例を明るく楽しく学び、型定義をシンプルに保ちましょう！

gizanbeak.com

Exclude<T, U>

特徴

Exclude型は、型 T から型 U に含まれる型を取り除くことができます。これにより、特定の型を除外する必要がある場合に、簡単に新しい型を作成できます。

使い所

型の集合から特定の型を排除したい場合や、条件に適合しない型を除外する際に便利です。

type AvailableColors = "red" | "green" | "blue" | "yellow";
type UsedColors = "red" | "blue";

type RemainingColors = Exclude<AvailableColors, UsedColors>; // "green" | "yellow"

Extract<T, U>

特徴

Extract型は、型 T と型 U の両方に含まれる型を抽出することができます。これにより共通する型を取得することが容易になります。

使い所

型の集合から共通する型を抽出したい場合や、複数の条件に適合する型を取得する際に便利です。

type AvailableColors = "red" | "green" | "blue" | "yellow";
type SelectedColors = "red" | "blue" | "purple";

type ValidSelectedColors = Extract<AvailableColors, SelectedColors>; // "red" | "blue"

まとめ

ユーティリティ型はTypeScriptを実務で使う上では欠かせない便利な機能です。
Partial、Readonly、Pick、Required、Record、Omit、Exclude、Extractの8つのユーティリティ型を使いこなすことでコードが読みやすくなり、安全性もアップします。

これらの型を理解してTypeScriptをもっと効果的に使いましょう！

Gizanbeak