【TypeScript】ユーティリティ型 完全ガイド｜Partial・Pick・Omit・Record など全20種を実例付きで解説

この記事で学べること

• ユーティリティ型とは何か ― なぜ必要で、どう便利なのか
• Partial / Required / Readonly ― プロパティの修飾を変換する型
• Record ― キーと値の型を指定してオブジェクト型を作る
• Pick / Omit ― オブジェクト型からプロパティを選択・除外する
• Exclude / Extract ― Union型から特定のメンバーを除外・抽出する
• NonNullable ― null と undefined を除外する
• ReturnType / Parameters ― 関数の戻り値型・引数型を取得する
• ConstructorParameters / InstanceType ― クラスのコンストラクタ型・インスタンス型を取得する
• Awaited ― Promiseのネストをアンラップする
• Uppercase / Lowercase / Capitalize / Uncapitalize ― 文字列リテラル型を操作する
• ThisParameterType / OmitThisParameter / ThisType ― this の型を操作する
• 複数のユーティリティ型を組み合わせる実務パターン集
• DeepPartial / DeepReadonly / Mutable など自作ユーティリティ型の作り方
• よくあるエラーと対処法

前提知識：この記事はTypeScriptの基本型（string, number, boolean）、オブジェクト型、関数の型定義、ジェネリクスの基本（<T>）を理解している方を対象としています。基本型から学びたい方は【TypeScript】型の書き方 完全入門を、ジェネリクスの詳細を学びたい方は【TypeScript】ジェネリクス完全ガイドを先にお読みください。

// 元の型
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// 更新用の型を手書きで定義 → User と二重管理になる
interface UserUpdate {
  name?: string;
  email?: string;
  age?: number;
}

// プロフィール表示用の型も手書き → さらに重複
interface UserProfile {
  name: string;
  email: string;
}
// User に createdAt を追加したら、UserUpdate と UserProfile も手動で修正が必要...

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// Partial + Omit で更新用の型を派生
type UserUpdate = Partial<Omit<User, 'id'>>;

// Pick でプロフィール表示用の型を派生
type UserProfile = Pick<User, 'name' | 'email'>;

// User に createdAt を追加しても、UserUpdate は自動的に追従する

ポイント：ユーティリティ型を使えば、元の型（Single Source of Truth）を変更するだけで、派生型が自動的に追従します。これが型レベルの DRY 原則です。

interface User {
  id: number;
  name: string;
  email: string;
}

// Partial<User> は以下と同等:
// { id?: number; name?: string; email?: string; }

const update: Partial<User> = {
  name: '田中太郎'  // email や id は省略OK
};

// TypeScript 標準ライブラリの定義
type Partial<T> = {
  [P in keyof T]?: T[P];
};

// 仕組み:
// 1. keyof T で T の全プロパティキーを列挙
// 2. [P in keyof T] で各キーをイテレーション
// 3. ? を付加して各プロパティをオプショナルに
// 4. T[P] で元の値の型を保持

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  stock: number;
}

// 更新関数: id は必須、それ以外は任意
async function updateProduct(
  id: number,
  data: Partial<Omit<Product, 'id'>>
): Promise<Product> {
  const response = await fetch(`/api/products/${id}`, {
    method: 'PATCH',
    body: JSON.stringify(data),
  });
  return response.json();
}

// 価格だけ更新 → 型安全！
updateProduct(1, { price: 2980 });

// 存在しないプロパティは指定できない
updateProduct(1, { color: 'red' }); // エラー！ color は Product に存在しない

interface FormState {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
}

// 部分的な状態更新を型安全に
function updateForm(current: FormState, updates: Partial<FormState>): FormState {
  return { ...current, ...updates };
}

注意：Partial は1階層目のプロパティのみオプショナルにします。ネストしたオブジェクトのプロパティは変換されません。ネスト対応が必要な場合は、後述の DeepPartial を使います。

interface Config {
  host?: string;
  port?: number;
  ssl?: boolean;
  timeout?: number;
}

// Required<Config> は以下と同等:
// { host: string; port: number; ssl: boolean; timeout: number; }

const fullConfig: Required<Config> = {
  host: 'localhost',
  port: 3000,
  ssl: true,
  timeout: 5000,
}; // すべてのプロパティが必須

// TypeScript 標準ライブラリの定義
type Required<T> = {
  [P in keyof T]-?: T[P];
};

// -? がポイント: ? 修飾子を「除去」するという意味
// Partial の +? と対になる操作

ポイント：-? は Mapped Types の修飾子除去構文です。+?（Partial で使われる）がオプショナルを「追加」するのに対し、-? はオプショナルを「除去」します。同様に -readonly で読み取り専用を除去できます。

interface AppConfig {
  theme?: 'light' | 'dark';
  language?: string;
  fontSize?: number;
  showSidebar?: boolean;
}

const defaultConfig: Required<AppConfig> = {
  theme: 'light',
  language: 'ja',
  fontSize: 14,
  showSidebar: true,
};

function createConfig(userConfig: AppConfig): Required<AppConfig> {
  return { ...defaultConfig, ...userConfig };
}

const config = createConfig({ theme: 'dark' });
// config.fontSize は number（undefined の可能性がない）

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Readonly<User> = {
  id: 1,
  name: '田中太郎',
  email: 'tanaka@example.com',
};

user.name = '佐藤次郎';
// エラー！ Cannot assign to 'name' because it is a read-only property.

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

function calculateTax(order: Readonly<{ total: number; items: string[] }>): number {
  // order.total = 0; // エラー！ read-only
  return Math.floor(order.total * 0.1);
}

注意：Readonly は「浅い（シャロー）」変換です。ネストしたオブジェクトのプロパティは読み取り専用になりません。深い読み取り専用が必要な場合は、後述の DeepReadonly を使います。

// キーが string、値が number のオブジェクト
const scores: Record<string, number> = {
  math: 90,
  english: 85,
  science: 92,
};

// リテラル型でキーを限定
type Role = 'admin' | 'editor' | 'viewer';

const permissions: Record<Role, string[]> = {
  admin: ['read', 'write', 'delete'],
  editor: ['read', 'write'],
  viewer: ['read'],
}; // 3つのキーがすべて必須！

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

// K extends keyof any = K は string | number | symbol のいずれか
// オブジェクトのキーになれる型のみ受け付ける

type Status = 'pending' | 'active' | 'inactive' | 'banned';

interface StatusConfig {
  label: string;
  color: string;
  icon: string;
}

// すべてのステータスに対してConfigを定義（漏れがあるとエラー）
const statusMap: Record<Status, StatusConfig> = {
  pending: { label: '審査中', color: '#f59e0b', icon: 'clock' },
  active:  { label: '有効', color: '#10b981', icon: 'check' },
  inactive: { label: '無効', color: '#6b7280', icon: 'pause' },
  banned:  { label: '停止', color: '#ef4444', icon: 'ban' },
};

type Lang = 'ja' | 'en' | 'zh';
type TranslationKey = 'greeting' | 'farewell' | 'thanks';

const translations: Record<Lang, Record<TranslationKey, string>> = {
  ja: { greeting: 'こんにちは', farewell: 'さようなら', thanks: 'ありがとう' },
  en: { greeting: 'Hello', farewell: 'Goodbye', thanks: 'Thank you' },
  zh: { greeting: '你好', farewell: '再见', thanks: '谢谢' },
};

ポイント：Record をリテラル型のUnionと組み合わせると、すべてのキーが必須になるため、定義漏れをコンパイル時に検出できます。ステータス管理、i18n、ルーティング設定など「すべてのパターンを網羅する」場面で強力です。

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  createdAt: Date;
}

// name と email だけを持つ型
type UserProfile = Pick<User, 'name' | 'email'>;
// { name: string; email: string; }

// id と name だけを持つ型
type UserSummary = Pick<User, 'id' | 'name'>;
// { id: number; name: string; }

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

// K extends keyof T → K は T のプロパティ名のみ指定可能
// 存在しないプロパティ名を指定するとコンパイルエラー

// API が返す完全なユーザー型
interface ApiUser {
  id: number;
  name: string;
  email: string;
  passwordHash: string;
  role: string;
  lastLogin: Date;
  createdAt: Date;
}

// フロントエンドに公開して良い情報だけを抽出
type PublicUser = Pick<ApiUser, 'id' | 'name' | 'role'>;

// リスト表示用の最小限の型
type UserListItem = Pick<ApiUser, 'id' | 'name' | 'email'>;

interface User {
  id: number;
  name: string;
  email: string;
  passwordHash: string;
  createdAt: Date;
}

// passwordHash を除外
type SafeUser = Omit<User, 'passwordHash'>;
// { id: number; name: string; email: string; createdAt: Date; }

// 複数除外もOK
type UserInput = Omit<User, 'id' | 'createdAt'>;
// { name: string; email: string; passwordHash: string; }

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

// 仕組み:
// 1. keyof T で T の全キーを取得
// 2. Exclude で K を除外したキーの集合を得る
// 3. Pick でその残りのキーだけを T から抽出

interface Article {
  id: number;
  title: string;
  body: string;
  author: string;
  createdAt: Date;
  updatedAt: Date;
}

// 新規作成時は id, createdAt, updatedAt はサーバー側で生成
type CreateArticle = Omit<Article, 'id' | 'createdAt' | 'updatedAt'>;
// { title: string; body: string; author: string; }

// 更新時は id が必要、タイムスタンプはサーバー管理
type UpdateArticle = Partial<Omit<Article, 'id' | 'createdAt' | 'updatedAt'>>;

type AllColors = 'red' | 'green' | 'blue' | 'yellow';

// 'red' と 'green' を除外
type CoolColors = Exclude<AllColors, 'red' | 'yellow'>;
// 'green' | 'blue'

// 型レベルで Union メンバーを除外
type T1 = Exclude<string | number | boolean, boolean>;
// string | number

type Exclude<T, U> = T extends U ? never : T;

// Conditional Types の分配法則（Distributive）が働く:
// Exclude<'a' | 'b' | 'c', 'a'>
//   = ('a' extends 'a' ? never : 'a') | ('b' extends 'a' ? never : 'b') | ('c' extends 'a' ? never : 'c')
//   = never | 'b' | 'c'
//   = 'b' | 'c'

ポイント：Exclude が動作する鍵は Conditional Types の分配法則（Distributive Conditional Types）です。Union型の各メンバーに対して条件が個別に評価され、条件を満たすものが never（= 消える）になります。

type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keydown'; key: string }
  | { type: 'scroll'; offset: number };

// scroll イベントを除外
type InteractiveEvent = Exclude<Event, { type: 'scroll' }>;
// { type: 'click'; x: number; y: number } | { type: 'keydown'; key: string }

type AllTypes = string | number | boolean | null | undefined;

// string と number だけを抽出
type Primitives = Extract<AllTypes, string | number>;
// string | number

type Extract<T, U> = T extends U ? T : never;

// Exclude の逆: 条件を満たすものを「残す」

type AdminPermission = 'read' | 'write' | 'delete' | 'manage';
type EditorPermission = 'read' | 'write' | 'publish';

// 両者に共通する権限を抽出
type SharedPermission = Extract<AdminPermission, EditorPermission>;
// 'read' | 'write'

type MaybeString = string | null | undefined;

type DefiniteString = NonNullable<MaybeString>;
// string

type T1 = NonNullable<string | number | null>;
// string | number

// TypeScript 4.8以降
type NonNullable<T> = T & {};

// TypeScript 4.7以前
type NonNullable<T> = T extends null | undefined ? never : T;

// process.env の値は string | undefined
function getEnvVar(key: string): NonNullable<string | undefined> {
  const value = process.env[key];
  if (value === undefined) {
    throw new Error(`環境変数 ${key} が設定されていません`);
  }
  return value; // string が返る（undefined ではない）
}

const dbUrl = getEnvVar('DATABASE_URL');
// dbUrl の型は string（undefined がない）

function getUser() {
  return { id: 1, name: '太郎', age: 25 };
}

// 関数の戻り値から型を推論
type User = ReturnType<typeof getUser>;
// { id: number; name: string; age: number; }

// 組み込み関数にも使える
type T1 = ReturnType<() => string>;  // string
type T2 = ReturnType<() => void>;    // void
type T3 = ReturnType<() => never>;   // never

type ReturnType<T extends (...args: any) => any> =
  T extends (...args: any) => infer R ? R : any;

// infer R で戻り値の型を推論変数 R にキャプチャ
// T が関数型なら R（戻り値の型）を返す

// ライブラリが型をエクスポートしていない場合
import { createStore } from 'some-library';

// 関数の戻り値から型を取得
type Store = ReturnType<typeof createStore>;

// 自作関数のテストでも活用
function createApiClient(baseUrl: string) {
  return {
    get: (path: string) => fetch(`${baseUrl}${path}`),
    post: (path: string, data: unknown) => fetch(`${baseUrl}${path}`, { method: 'POST', body: JSON.stringify(data) }),
  };
}

type ApiClient = ReturnType<typeof createApiClient>;
// { get: (path: string) => Promise<Response>; post: ... }

注意：ReturnType に渡すのは型であり、値ではありません。関数の値から型を取るには typeof を前置します: ReturnType<typeof myFunction>

function greet(name: string, age: number): string {
  return `${name}さん（${age}歳）`;
}

type GreetParams = Parameters<typeof greet>;
// [name: string, age: number]

// タプルの各要素にインデックスでアクセス
type FirstParam = GreetParams[0]; // string
type SecondParam = GreetParams[1]; // number

type Parameters<T extends (...args: any) => any> =
  T extends (...args: infer P) => any ? P : never;

// infer P で引数リストをタプル型としてキャプチャ

// 元の関数
function fetchUser(id: number, options?: { cache: boolean }): Promise<User> {
  /* ... */
}

// ロギング付きラッパー（引数の型を自動で合わせる）
function withLogging(
  ...args: Parameters<typeof fetchUser>
): ReturnType<typeof fetchUser> {
  console.log('fetchUser called with:', args);
  return fetchUser(...args);
}

class User {
  constructor(
    public name: string,
    public age: number,
    public email: string
  ) {}
}

// コンストラクタの引数型
type UserArgs = ConstructorParameters<typeof User>;
// [name: string, age: number, email: string]

// インスタンスの型
type UserInstance = InstanceType<typeof User>;
// User（= { name: string; age: number; email: string }）

// 任意のクラスをインスタンス化するファクトリ
function createInstance<T extends new (...args: any[]) => any>(
  ctor: T,
  ...args: ConstructorParameters<T>
): InstanceType<T> {
  return new ctor(...args);
}

const user = createInstance(User, '太郎', 25, 'taro@example.com');
// user の型は User — 型安全にインスタンス化できる

type A = Awaited<Promise<string>>;
// string

type B = Awaited<Promise<Promise<number>>>;
// number（再帰的にアンラップ）

type C = Awaited<string | Promise<number>>;
// string | number

async function fetchUsers(): Promise<User[]> {
  const res = await fetch('/api/users');
  return res.json();
}

// ReturnType は Promise<User[]> を返す
type T1 = ReturnType<typeof fetchUsers>; // Promise<User[]>

// Awaited と組み合わせて Promise をアンラップ
type T2 = Awaited<ReturnType<typeof fetchUsers>>; // User[]

type T1 = Uppercase<'hello'>;      // 'HELLO'
type T2 = Lowercase<'HELLO'>;      // 'hello'
type T3 = Capitalize<'hello'>;     // 'Hello'
type T4 = Uncapitalize<'Hello'>;   // 'hello'

type EventName = 'click' | 'focus' | 'blur';

// 'onClick' | 'onFocus' | 'onBlur' を自動生成
type EventHandler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'

// ハンドラプロパティを持つ型を自動生成
type EventHandlers = {
  [K in EventHandler]: () => void;
};
// { onClick: () => void; onFocus: () => void; onBlur: () => void; }

type Getters<T> = {
  [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K];
};

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

type PersonGetters = Getters<Person>;
// { getName: () => string; getAge: () => number; }

function toHex(this: Number) {
  return this.toString(16);
}

type T = ThisParameterType<typeof toHex>;
// Number

function toHex(this: Number) {
  return this.toString(16);
}

// this を除去して通常の関数型に
type PureToHex = OmitThisParameter<typeof toHex>;
// () => string

const bound: PureToHex = toHex.bind(255);
console.log(bound()); // 'ff'

interface ComponentOptions<D, M> {
  data?: () => D;
  methods?: M & ThisType<D & M>; // methods 内の this は D & M
}

function defineComponent<D, M>(options: ComponentOptions<D, M>) { /* ... */ }

defineComponent({
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++; // this.count は number と推論される！
    },
    reset() {
      this.count = 0;
      this.increment(); // this.increment() も型安全に呼べる
    },
  },
});

// 汎用ヘルパー型
type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// email と age だけオプショナルに
type CreateUser = Optional<User, 'email' | 'age'>;
// { id: number; name: string; email?: string; age?: number; }

type SetRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

interface Options {
  width?: number;
  height?: number;
  color?: string;
  label?: string;
}

// width と height だけ必須に
type SizedOptions = SetRequired<Options, 'width' | 'height'>;
// { width: number; height: number; color?: string; label?: string; }

type SetReadonly<T, K extends keyof T> = Omit<T, K> & Readonly<Pick<T, K>>;

// id と createdAt だけ読み取り専用
type UserEntity = SetReadonly<User, 'id'>;

type Override<T, U> = Omit<T, keyof U> & U;

interface ApiResponse {
  id: number;
  createdAt: string; // API は ISO文字列を返す
  updatedAt: string;
}

// フロントでは Date に変換して使う
type AppModel = Override<ApiResponse, {
  createdAt: Date;
  updatedAt: Date;
}>;
// { id: number; createdAt: Date; updatedAt: Date; }

interface Article {
  id: number;
  title: string;
  body: string;
  author: string;
  createdAt: Date;
  updatedAt: Date;
}

// サーバー自動生成フィールド
type AutoFields = 'id' | 'createdAt' | 'updatedAt';

// 一覧表示用（軽量）
type ArticleListItem = Pick<Article, 'id' | 'title' | 'author' | 'createdAt'>;

// 新規作成用
type CreateArticle = Omit<Article, AutoFields>;

// 更新用（部分更新可能）
type UpdateArticle = Partial<Omit<Article, AutoFields>>;

// 読み取り専用（詳細表示用）
type ArticleDetail = Readonly<Article>;

ポイント：1つのマスター型（Article）を Single Source of Truth にして、ユーティリティ型で派生することで、プロパティの追加・変更に対してすべての型が自動的に追従します。

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object
    ? DeepPartial<T[P]>
    : T[P];
};

// 使用例
interface Config {
  database: {
    host: string;
    port: number;
    credentials: {
      user: string;
      password: string;
    };
  };
  cache: { ttl: number };
}

// 深いネストの一部だけ指定できる
const overrides: DeepPartial<Config> = {
  database: {
    credentials: { password: 'newpass' },
  },
};

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object
    ? DeepReadonly<T[P]>
    : T[P];
};

const config: DeepReadonly<Config> = { /* ... */ };
// config.database.host = 'new'; // エラー！ 深いプロパティも readonly

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

interface FrozenUser {
  readonly id: number;
  readonly name: string;
}

type EditableUser = Mutable<FrozenUser>;
// { id: number; name: string; } — readonly が除去された

// 全プロパティを nullable に
type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

// 全プロパティから null/undefined を除去
type NonNullableProps<T> = {
  [P in keyof T]: NonNullable<T[P]>;
};

type ValueOf<T> = T[keyof T];

const STATUS = {
  ACTIVE: 'active',
  INACTIVE: 'inactive',
  PENDING: 'pending',
} as const;

type StatusValue = ValueOf<typeof STATUS>;
// 'active' | 'inactive' | 'pending'

type PickByType<T, V> = {
  [K in keyof T as T[K] extends V ? K : never]: T[K];
};

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  isActive: boolean;
}

// string 型のプロパティだけ抽出
type StringProps = PickByType<User, string>;
// { name: string; email: string; }

カスタムユーティリティ型 まとめ

• DeepPartial<T> ― ネスト対応の Partial
• DeepReadonly<T> ― ネスト対応の Readonly
• Mutable<T> ― readonly を除去（Readonly の逆）
• Optional<T, K> ― 指定プロパティだけオプショナル
• SetRequired<T, K> ― 指定プロパティだけ必須
• SetReadonly<T, K> ― 指定プロパティだけ readonly
• Override<T, U> ― プロパティの型を上書き
• Nullable<T> ― 全プロパティを nullable に
• ValueOf<T> ― 値の型の Union を取得
• PickByType<T, V> ― 値の型でフィルタリング

interface User {
  id: number;
  name: string;
}

// エラー: Type '"age"' does not satisfy the constraint '"id" | "name"'
type T = Pick<User, 'age'>;

// 対処: 存在するプロパティ名のみ指定する
type T2 = Pick<User, 'id' | 'name'>; // OK

ポイント：Pick は K extends keyof T の制約があるため、存在しないキーを指定するとエラーになります。一方、Omit は K extends keyof any なので、存在しないキーを指定してもエラーになりません（単に無視される）。

function getUser() { return { id: 1, name: '太郎' }; }

// エラー: 'getUser' refers to a value, but is being used as a type here
type T = ReturnType<getUser>;

// 対処: typeof を使って型に変換する
type T2 = ReturnType<typeof getUser>; // OK

interface State {
  user: { name: string };
  items: string[];
}

const state: Readonly<State> = { user: { name: '太郎' }, items: ['a'] };

// state.user = {}; // エラー（1階層目は保護される）
state.user.name = '次郎';  // エラーにならない！（2階層目は保護されない）
state.items.push('b');    // エラーにならない！（配列のメソッドは呼べる）

// 対処: DeepReadonly を使う、または as const を使う

const map: Record<string, number> = { a: 1 };

// 型的には number だが、実際は undefined の可能性あり
const val = map['nonexistent']; // number（実際は undefined）

// 対処1: noUncheckedIndexedAccess を有効にする
// 対処2: リテラル型で限定する Record<'a' | 'b', number>

注意：tsconfig.json の noUncheckedIndexedAccess: true を有効にすると、Record<string, T> のインデックスアクセスが T | undefined を返すようになり、安全性が向上します。

TypeScript シリーズ記事

• 【TypeScript】型の書き方 完全入門｜基本型・Union・Generics・型ガードまで ― TypeScriptの型システム全体を基本から学べる入門記事
• 【TypeScript】関数の型定義 完全ガイド｜引数・戻り値・オーバーロード・ジェネリクス関数まで ― 関数に特化した型定義を体系的に解説
• 【TypeScript】クラスの型定義 完全ガイド｜アクセス修飾子・抽象クラス・インターフェース実装まで ― クラスに特化した型定義を体系的に解説
• 【TypeScript】ジェネリクス完全ガイド｜基礎から実務パターンまで徹底解説 ― ジェネリクスの基本から高度なテクニックまで
• 【TypeScript】ユーティリティ型 完全ガイド（この記事） ― 全20種のユーティリティ型を実務ユースケース付きで解説