【TypeScript】部分型を完全ガイド！5つの方法で理解を深めよう！

はじめに

TypeScriptは、JavaScriptに静的な型情報を追加する人気のあるスクリプト言語です。

特に、TypeScriptの部分型は、大規模なアプリケーションやライブラリの開発において非常に役立つ機能として知られています。

この記事では、TypeScriptの部分型についての基本から、応用、注意点、カスタマイズ方法までを、5つのサンプルコードを交えて詳細に解説していきます。

部分型をまだ使ったことがない初心者の方や、より深く理解したい中級者以上の方も、本記事を通して部分型の知識を深めることができるでしょう。

●TypeScriptと部分型の基本

TypeScriptは、JavaScriptに静的型機能を追加する言語として広く採用されています。

この静的型は、バグを早期に発見したり、IDEの補完機能を向上させたりするために非常に有効です。

TypeScriptの中でも「部分型」という型があり、これは非常に強力なツールとして多くの開発者に愛用されています。

○部分型って何?

部分型とは、既存の型から一部のプロパティを取り出した新しい型を定義するためのTypeScriptの型です。

オブジェクトの型定義から一部だけを取り出したい場合や、特定のプロパティのみを持つオブジェクトを定義したい場合などに非常に役立ちます。

例を見てみましょう。

// 元の型
interface Person {
  name: string;
  age: number;
  address: string;
}

// 部分型を使用してnameとageだけを取り出す
type NameAndAge = Pick<Person, 'name' | 'age'>;

このコードでは、Personというインターフェースが定義されています。

そして、部分型としてPickを使用して、Personからnameとageだけを持つ新しい型NameAndAgeを定義しています。

このコードを実行すると、次のように部分型が適用されます。

NameAndAge型は次のようになります。

{
  name: string;
  age: number;
}

○部分型のメリットとデメリット

部分型のメリットは多岐にわたります。

その主な点を挙げてみます。

❶コードの再利用性を向上させる

部分型を使用することで、既存の型から必要な部分だけを抜き出して再利用することが容易になります。

❷型の安全性を高める

部分型を使うことで、特定のプロパティだけを扱いたい場合に、他の不要なプロパティが混入することを防ぐことができます。

❸コードの可読性を向上させる

部分型を利用することで、コードの目的がより明確になり、第三者がそのコードを読んだ際の理解が深まることが期待されます。

一方で、部分型にもいくつかデメリットがあります。

❶過度に部分型を使用するとコードが複雑になる

部分型を過度に使用すると、型の定義が散らばり、コード全体の可読性が低下する可能性があります。

❷型の整合性を保つための注意が必要

元の型が変更された場合、それに伴い部分型も適切に更新する必要があります。

この更新を怠ると、型の不整合が生じる可能性があります。

●部分型の詳しい使い方

TypeScriptの部分型は、オブジェクトの型から特定のプロパティだけを取り出して新たな型を作成する際に非常に役立ちます。

これは特に大規模なプロジェクトや複雑なオブジェクト構造を持つアプリケーションでの開発において、コードの可読性や再利用性を高めるための重要な要素となります。

ここでは、部分型の基本的な使い方をサンプルコードを交えて詳細に解説していきます。

○サンプルコード1：基本的な部分型の作成

まず、基本的な部分型の作成方法から始めます。

// 元となる型を定義
type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

// 部分型を使用してUser型からidとnameのみを取り出した型を作成
type UserBrief = Pick<User, 'id' | 'name'>;

このコードでは、Userという名前の型を定義しています。

User型は4つのプロパティを持っています：id, name, email, ageです。

次に、Pickという組み込みの型ユーティリティを使用して、User型からidとnameのみを取り出して新たな型UserBriefを作成しています。

具体的には、Pickの第一引数に元の型（この場合はUser型）を、第二引数に取り出したいプロパティの名前を文字列リテラル型のユニオンとして渡します。

この例では'id' | 'name'としています。

このコードを実行すると、新たに作成されたUserBrief型は次のようになります。

type UserBrief = {
  id: number;
  name: string;
};

この方法で、既存の型から特定のプロパティだけを取り出して新たな型を簡単に作成することができます。

特にAPIのレスポンスやDBから取得したデータなど、不要なプロパティを除外して新たな型を作成したい場合に役立ちます。

○サンプルコード2：条件付き部分型の使い方

TypeScriptは非常に豊富な型システムを持っており、その中でも「条件付き部分型」は非常に強力な機能の一つです。

ここでは、条件付き部分型の使い方とそれを活用する際のサンプルコードを詳細に解説していきます。

まず、条件付き部分型とは何かを簡単に理解するために、次の型を考えてみましょう。

type IsString<T> = T extends string ? true : false;

このコードでは、Tという型がstring型に該当する場合、trueを返し、そうでない場合はfalseを返す型IsStringを定義しています。

条件付き部分型はこのように、ある型が別の型に該当するかどうかをチェックし、その結果に基づいて異なる型を返すことができます。

次に、この型を実際に使用する例を見てみましょう。

type A = IsString<string>;  // true
type B = IsString<number>;  // false

このコードを実行すると、Aはtrueを、Bはfalseをそれぞれ持つ型として評価されます。

なぜなら、AのstringはIsStringの条件を満たすためtrueを、Bのnumberは条件を満たさないためfalseを返すからです。

しかし、単純な真偽値を返すだけでなく、より複雑な型の操作も可能です。

例えば、与えられたオブジェクトのキーのみを取得する型を作成することができます。

type Keys<T> = T extends { [key: string]: any } ? keyof T : never;

このコードでは、Tがオブジェクトの型である場合、そのオブジェクトのキーのみを取得するKeys型を定義しています。

サンプルとして、次のように使用することができます。

type Person = {
    name: string;
    age: number;
}

type PersonKeys = Keys<Person>;  // "name" | "age"

このコードを実行すると、PersonKeysは"name" | "age"という型を持つことになります。

つまり、Personオブジェクトのキーのみを取得しているのです。

○サンプルコード3：部分型を活用した関数の作成

TypeScriptの部分型は、大きな型から一部のプロパティやメソッドを抽出して、新しい型として利用する際の強力なツールとなっています。

部分型を活用することで、再利用性を高めるだけでなく、型の管理が格段に楽になります。

ここでは、部分型を利用して関数を作成する方法を紹介します。

部分型を使って、特定のプロパティを持つオブジェクトを受け取り、そのプロパティの値を変更する関数を考えてみましょう。

部分型を活用した関数のサンプルコードを紹介します。

// 既存の大きな型の定義
type Profile = {
  name: string;
  age: number;
  address: string;
  email: string;
};

// 部分型を使用して、Profile型の一部のプロパティだけを取り出す
type NameAndEmail = Pick<Profile, 'name' | 'email'>;

// 部分型を使用した関数の定義
function updateNameAndEmail(target: NameAndEmail): NameAndEmail {
  return {
    ...target,
    name: target.name + "さん",
    email: target.email.toLowerCase()
  };
}

このコードでは、まずProfileという大きな型を定義しています。

そして、その中からnameとemailだけを取り出した新しい部分型NameAndEmailを作成しています。

このNameAndEmail部分型は、Pickという組み込みの型ユーティリティを使用して定義されています。

最後に、この部分型を引数として取り、その値を更新するupdateNameAndEmail関数を定義しています。

関数内では、受け取ったオブジェクトのnameに「さん」を追加し、emailを小文字に変換しています。

このコードを実行すると、次のような結果が得られます。

例えば、次のようなオブジェクトをupdateNameAndEmail関数に渡すと、

const person: NameAndEmail = {
  name: "山田",
  email: "YAMADA@example.com"
};

const updatedPerson = updateNameAndEmail(person);
console.log(updatedPerson);

コンソールには、{ name: "山田さん", email: "yamada@example.com" }という結果が表示されます。

ここで、nameの末尾に「さん」が追加され、emailが小文字に変換されているのが確認できます。

○サンプルコード4：部分型のネスト

TypeScriptの部分型を学んできた方々に、さらに深い部分へと導くネストした部分型について解説します。

部分型のネストとは、一つの部分型をさらに細かく部分型に分けることを言います。

これは、より複雑なデータ構造や型の制約を持つ際に非常に有効となります。

例として、ユーザーの情報を持つオブジェクト型を考えましょう。

このオブジェクトには、名前や住所、連絡先といった情報が含まれています。

しかし、全ての情報を一度に取得したいわけではなく、特定の情報のみを取得したい場合があります。

この時、部分型のネストを利用すると、非常にスムーズにデータの取り扱いが可能となります。

ネストした部分型を使ったサンプルコードを紹介します。

// ユーザーの全情報を持つ型
type User = {
    name: string;
    age: number;
    address: {
        postalCode: string;
        city: string;
        street: string;
    };
    contact: {
        email: string;
        phone: string;
    };
};

// ユーザーの住所情報のみを取得する部分型
type UserAddress = Pick<User, 'address'>;

// 住所の中の都市情報のみを取得する部分型
type UserCity = Pick<User['address'], 'city'>;

このコードでは、まずUser型としてユーザーの情報を全て持つ型を定義しています。

次に、部分型のPickを用いて、User型から住所情報のみを取得するUserAddress型を定義しています。

さらに、UserAddressから都市情報のみを取得するUserCity型を定義しています。

このコードを実行すると、UserAddress型ではaddressの情報のみが、UserCity型ではcityの情報のみが取得できるという結果となります。

これにより、非常に柔軟にデータの取得や操作が可能となります。

○サンプルコード5：部分型を用いた型の結合

TypeScriptでは、複数の型を結合して新しい型を作成することができます。

この機能を活用することで、柔軟に型の構造を変更したり、既存の型を再利用して新しい型を定義することができます。

部分型を使って複数の型を結合する方法を、具体的なサンプルコードとともに解説します。

まず、次のように2つのオブジェクト型を定義します。

// オブジェクト型A
type TypeA = {
  a: string;
  b: number;
};

// オブジェクト型B
type TypeB = {
  c: boolean;
  d: string;
};

このコードでは、TypeAというオブジェクト型と、TypeBというオブジェクト型を定義しています。

それぞれ異なるプロパティを持っており、これらを結合して1つの新しい型を作成します。

具体的な型の結合の方法は次のようになります。

// TypeAとTypeBを結合した新しい型TypeCを定義
type TypeC = TypeA & TypeB;

このコードを実行すると、TypeCはTypeAとTypeBの両方のプロパティを持った新しい型として定義されます。

具体的には、TypeCは次のような形になります。

type TypeC = {
  a: string;
  b: number;
  c: boolean;
  d: string;
};

このようにして、TypeScriptの部分型を用いることで、複数の型を結合して新しい型を作成することができるのです。

●部分型の応用例

TypeScriptの部分型は、型定義の柔軟性を増すための非常に強力なツールです。

ここでは、部分型を利用したジェネリクスについて詳細に解説します。

ジェネリクスを部分型と組み合わせることで、より一般的かつ再利用可能な関数やクラスを作成することができます。

○サンプルコード6：部分型を利用したジェネリクス

TypeScriptのジェネリクスは、型を引数として取ることができる機能です。

これにより、一般的な関数やクラスを作成することができます。

部分型と組み合わせることで、特定の部分のみを抽出したり、特定の形状に合わせて型を調整することができます。

部分型を用いたジェネリクスのサンプルコードを紹介します。

type User = {
    id: number;
    name: string;
    email: string;
};

// 部分型を利用したジェネリクス関数
function extractFields<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
    const result: any = {};
    keys.forEach(key => {
        result[key] = obj[key];
    });
    return result;
}

const user: User = {
    id: 1,
    name: "山田太郎",
    email: "taro@example.com"
};

const partialUser = extractFields(user, ["id", "email"]);

このコードでは、extractFields関数を作成しています。

この関数は、オブジェクトとキーの配列を引数として取り、そのキーに該当するフィールドのみを抽出した新しいオブジェクトを返します。

ここで、Pick<T, K>型は部分型の一種で、Tの中のKというキーのみを持つ型を表します。

このコードを実行すると、partialUserオブジェクトは{id: 1, email: "taro@example.com"}という形になります。

nameフィールドは抽出されていません。

○サンプルコード7：部分型を使ったデータのフィルタリング

TypeScriptでは、部分型を使ってデータのフィルタリングが非常に簡単になります。

ここでは、その具体的な手法と使用例を、サンプルコードを通して解説していきます。

まず、部分型を使ってデータをフィルタリングするための環境を設定します。

複数の商品データを持つ配列と、その商品データの型定義を紹介します。

type 商品 = {
    id: number;
    名前: string;
    カテゴリ: string;
};

const 商品リスト: 商品[] = [
    { id: 1, 名前: "Tシャツ", カテゴリ: "衣類" },
    { id: 2, 名前: "マグカップ", カテゴリ: "食器" },
    { id: 3, 名前: "ノート", カテゴリ: "文房具" }
];

このコードでは、商品という型を定義して、その型に合わせて複数の商品データを持つ商品リストという配列を作成しています。

次に、特定のカテゴリに基づいて商品をフィルタリングする関数を部分型を使用して作成します。

function カテゴリでフィルタリング(リスト: 商品[], カテゴリ: string): 商品[] {
    return リスト.filter(商品 => 商品.カテゴリ === カテゴリ);
}

const 衣類のみ = カテゴリでフィルタリング(商品リスト, "衣類");
console.log(衣類のみ);

このコードを実行すると、衣類のカテゴリに一致する商品だけがフィルタリングされ、結果として次のような配列が得られます。

[{ id: 1, 名前: "Tシャツ", カテゴリ: "衣類" }]

○サンプルコード8：部分型を活用したAPIのレスポンス型定義

部分型はTypeScriptでデータの形状を柔軟に扱うための重要な機能の1つです。

Web APIのレスポンスを取得する際、希望するプロパティだけを取り出したい、あるいはAPIのレスポンス型をカスタムしたいと思うことがよくあります。

ここでは、部分型を使用してAPIのレスポンス型定義を行う方法を紹介します。

まずはじめに、APIから取得する可能性があるレスポンスの型を考えてみましょう。

// APIのレスポンス型
type ApiResponse = {
  userId: number;
  userName: string;
  userAge: number;
  userEmail: string;
  userPhone: string;
};

このAPIからは、ユーザーのID、名前、年齢、メールアドレス、電話番号の情報を取得できます。

しかし、ある場合にはメールアドレスと電話番号だけが必要な場面も考えられます。

その際に部分型を活用して、必要なプロパティだけを取得する型を定義することができます。

このコードでは、Pickという組み込みの部分型を使用して、ApiResponseから必要なプロパティだけを取り出す型を作成しています。

// メールアドレスと電話番号だけを持つ型
type UserContact = Pick<ApiResponse, 'userEmail' | 'userPhone'>;

このコードを実行すると、UserContactという新しい型が作成され、この型はuserEmailとuserPhoneのみをプロパティとして持っています。

例えば、APIからデータを取得した後、この型を利用してデータを扱うことができます。

const getUserContact = (data: ApiResponse): UserContact => {
  return {
    userEmail: data.userEmail,
    userPhone: data.userPhone,
  };
};

// APIから取得したデータ
const apiData: ApiResponse = {
  userId: 1,
  userName: 'Taro',
  userAge: 25,
  userEmail: 'taro@example.com',
  userPhone: '090-1234-5678',
};

const contact = getUserContact(apiData);
console.log(contact);  // { userEmail: 'taro@example.com', userPhone: '090-1234-5678' }

このコードを実行すると、コンソールに{ userEmail: 'taro@example.com', userPhone: '090-1234-5678' }と表示されます。

これはUserContact型に従って、APIのレスポンスから必要なデータだけを取り出した結果です。

○サンプルコード9：部分型を活用した型の拡張

TypeScriptには、部分型という便利な機能が存在します。

部分型は、既存の型から特定のプロパティだけを取り出すことができる機能として、多くの開発者に親しまれています。

今回は、部分型を活用して、型の拡張を行う方法について詳しく解説します。

まず、基本的な部分型の構文を確認しましょう。

部分型は次のように使用することができます。

type 元の型 = {
  a: number;
  b: string;
  c: boolean;
};

type 部分型 = Pick<元の型, 'a' | 'c'>;

このコードでは、元の型という型からaとcというプロパティだけを取り出し、新しい型部分型として定義しています。

さて、部分型を利用して型を拡張する方法に移ります。

例として、次のユーザー情報を表す型が考えられます。

type User = {
  id: number;
  name: string;
  email: string;
};

こちらの型を元に、新たな型を拡張してみましょう。

拡張したい情報として、addressとphoneを考えます。

この場合、次のように記述することができます。

type UserDetails = User & {
  address: string;
  phone: string;
};

このコードでは、元のUser型に新たなプロパティを追加して、UserDetailsという新しい型を定義しています。

しかしこれだけでは、部分型を活用しているわけではありません。

ここで、部分型のPickを使用して、特定のプロパティだけを取り出し、新たに型を拡張してみましょう。

例えば、User型からnameとemailだけを取り出して、新たにphoneを追加した型を定義したい場合、次のように記述することができます。

type UserContact = Pick<User, 'name' | 'email'> & {
  phone: string;
};

このコードでは、User型からnameとemailのプロパティを取り出し、新しいphoneプロパティを追加してUserContactという新しい型を定義しています。

このように、部分型を活用することで、既存の型から必要なプロパティだけを取り出し、新たなプロパティを追加することで、柔軟に型を拡張することができます。

実際に上記のコードを実行すると、UserContact型はname, email, phoneの3つのプロパティを持つ型として認識されることになります。

これにより、例えばAPIのレスポンスなどで返ってくるデータの形状が変わった場合でも、部分型を活用して型を迅速に修正することができ、効率的な開発を実現することができます。

○サンプルコード10：部分型と他の型ユーティリティの組み合わせ

TypeScriptでは、部分型だけでなく、様々な型ユーティリティを組み合わせることで、非常に高度な型操作を行うことが可能です。

ここでは、部分型を中心に、その他の型ユーティリティとの組み合わせを使った実例を取り上げます。

まず、基本として次のようなユーザーの型を考えてみましょう。

type User = {
  id: number;
  name: string;
  age: number;
  address: {
    city: string;
    postalCode: string;
  };
};

このコードでは、Userという型を定義しています。この型はid、name、age、そしてaddressというオブジェクトを持っています。

次に、このユーザー型のうち、addressを取り出す部分型を作成したいとします。

また、addressの中のcityだけを取り出したい場面もあるでしょう。

その場合、部分型と組み込み型のPickを組み合わせることで、次のように型を取り出すことができます。

type UserAddress = Pick<User, 'address'>;
type UserCity = Pick<User, 'address'>['address']['city'];

このコードでは、まずPick型ユーティリティを使って、User型からaddressだけを取り出し、UserAddressという型を定義しています。

次に、さらにその中のcityだけを取り出すために、連鎖的な型参照を行って、UserCityという型を定義しています。

このコードを実行すると、UserAddressは次の型になります。

{
  address: {
    city: string;
    postalCode: string;
  };
}

また、UserCityはstring型になります。

さらに、部分型と他の型ユーティリティを組み合わせることで、より複雑な型操作を行うことができます。

例えば、Omitを使用して、Userからageプロパティを除外した型を作成することもできます。

type UserWithoutAge = Omit<User, 'age'>;

このコードを実行すると、UserWithoutAgeは次の型になります。

{
  id: number;
  name: string;
  address: {
    city: string;
    postalCode: string;
  };
}

●注意点と対処法

TypeScriptの部分型は非常に強力で、多くの柔軟性を持っています。

しかし、それだけに注意しなければならないポイントも存在します。

ここでは、部分型を使用する際のよくある問題点やそれらの対処法について、サンプルコードとともに詳しく解説していきます。

○部分型の落とし穴

部分型は、ある型の一部だけを取り出すのに役立ちますが、それが原因で型の整合性が失われる場合があります。

例えば、オブジェクトの特定のプロパティを部分型として取り出すとき、そのプロパティが本来持っていた他の関連するプロパティとの関係が断ち切られることがあります。

このコードでは、Person型からnameプロパティのみを取り出しています。

type Person = {
  name: string;
  age: number;
};

type NameOnly = Pick<Person, 'name'>;

このコードを実行すると、NameOnlyは{name: string}という型になります。

しかし、ageプロパティとnameプロパティが元々一緒に存在していた関係性は、NameOnly型では失われてしまいます。

○部分型の型安全性を確保する方法

部分型を使用する際には、型の整合性や関連性を意識してコーディングすることが大切です。

部分型の型安全性を確保するための具体的な方法をいくつか紹介します。

□関連するプロパティをまとめて部分型として取り出す

部分型を使う際に、一つのプロパティだけを取り出すのではなく、関連するプロパティをまとめて取り出すことで、型の整合性を保つことができます。

このコードでは、Person型からnameとageのプロパティを一緒に取り出しています。

type PersonDetails = Pick<Person, 'name' | 'age'>;

このコードを実行すると、PersonDetailsは{name: string, age: number}という型になり、nameとageの関係性が保たれています。

□カスタムユーティリティ型を作成して再利用する

頻繁に部分型を使う場合、カスタムのユーティリティ型を作成し、それを再利用することで、型の不整合を避けることができます。

このコードでは、関連するプロパティを持つ部分型を作成するカスタムユーティリティ型を定義しています。

type ExtractDetails<T, K1 extends keyof T, K2 extends keyof T> = {
  [P in K1 | K2]: T[P];
};

type PersonDetails = ExtractDetails<Person, 'name', 'age'>;

このコードを実行すると、PersonDetails型は{name: string, age: number}という型になります。

この方法で、必要なプロパティを取り出しつつ、関係性も保持することができます。

●部分型のカスタマイズ方法

部分型は、TypeScriptにおける強力な機能の1つとして、データ構造や関数の引数など、多くの場面で活用されます。

しかし、時にはデフォルトの部分型の挙動だけでは十分ではなく、より高度なカスタマイズや拡張が求められることがあります。

ここでは、部分型をカスタマイズし、さらに柔軟に利用するための方法を詳しく解説していきます。

○部分型の拡張とカスタマイズのポイント

□既存の部分型の再利用

TypeScriptにおける部分型の最も基本的なカスタマイズ方法は、既存の部分型を再利用することです。

例えば、ある型Aから部分型を取得した後、その部分型をさらに別の型Bと組み合わせることで新しい型を作成することができます。

   type A = {
       id: number;
       name: string;
       age: number;
   };

   type B = {
       address: string;
   };

   // Aの部分型を取得
   type PartialA = Partial<A>;

   // PartialAとBを組み合わせる
   type CombinedType = PartialA & B;

このコードでは、まずAの部分型をPartialAとして取得し、その後、PartialAとBを組み合わせて新しい型CombinedTypeを定義しています。

結果、CombinedTypeはid?, name?, age?, addressというプロパティを持つ型となります。

□条件付き部分型の利用

部分型だけでなく、条件付き型を組み合わせることで、より高度なカスタマイズが可能になります。

特定の条件を満たす場合にのみ部分型を適用するような型を作成することができます。

   type User = {
       id: number;
       name: string;
       isAdmin: boolean;
   };

   type AdminFields = {
       permissions: string[];
   };

   type CustomizedUser<T> = T extends { isAdmin: true } ? T & AdminFields : T;

このコードでは、User型のisAdminプロパティがtrueの場合にのみ、AdminFieldsを追加するカスタマイズされた型CustomizedUserを作成しています。

このように条件付き型を利用することで、柔軟に部分型のカスタマイズが行えます。

□関数と部分型の組み合わせ

関数の引数や戻り値として部分型を活用することで、関数の挙動をカスタマイズすることも可能です。

特定の関数が受け取る引数の型を部分型で制限することで、関数の安全性を高めることができます。

   function updateUser(data: Partial<User>) {
       // 更新処理
   }

このコードでは、updateUser関数が受け取るdataの型をPartial<User>として指定しています。

これにより、User型の任意のプロパティのみを持つオブジェクトを引数として受け取ることができるようになります。

まとめ

TypeScriptは、大規模なアプリケーション開発に欠かせない言語として多くの開発者に支持されています。

その中で、部分型はTypeScriptの持つ強力な型ユーティリティの一つとして、より洗練された型設計を実現するためのキーとなります。

本記事では、部分型の基本から応用、注意点、そしてカスタマイズ方法について、5つの具体的なサンプルコードを交えて解説しました。

TypeScriptの部分型は初心者にとっては難しく感じるかもしれませんが、しっかりと理解と実践を重ねることで、TypeScript開発の幅と深さが一気に広がります。

部分型を上手に活用し、より質の高いTypeScriptコードを書くための第一歩として、今回の記事を参考にしてみてください。