【TypeScript】ユーティリティ型の使い方！実務で役立つ頻出型一覧

1
// 元となるマスターの型定義
2
interface User {
3
  id: string;
4
  name: string;
5
  email: string;
6
  age: number;
7
}
8

9
// ❌ 悪い例: 手動で似たような型を二重定義する（メンテナンス性が低下）
10
interface UserUpdateRequestManual {
11
  id?: string;
12
  name?: string;
13
  email?: string;
14
  age?: number;
15
}
16

17
// ⭕ 良い例: ユーティリティ型 Partial を使って自動派生させる
18
type UserUpdateRequest = Partial<User>;

1
interface User {
2
  id: string;
3
  name: string;
4
  email: string;
5
  age?: number;
6
}
7

8
// すべてのプロパティがオプショナル（?）になる
9
type UpdateUserPayload = Partial<User>;
10

11
// 特定のプロパティだけを渡しても型エラーにならない
12
const payload: UpdateUserPayload = {
13
  name: "山田太郎",
14
};

1
interface UserConfig {
2
  theme?: "light" | "dark";
3
  autoSave?: boolean;
4
  timeout?: number;
5
}
6

7
// すべてのプロパティが必須になる
8
type FinalConfig = Required<UserConfig>;
9

10
// エラー例: 必須プロパティが不足している場合
11
// error TS2741: Property 'timeout' is missing in type '{ theme: "dark"; autoSave: true; }' but required in type 'Required<UserConfig>'.
12
const invalidConfig: FinalConfig = {
13
  theme: "dark",
14
  autoSave: true,
15
};

1
interface AppState {
2
  currentUserId: string;
3
  isLoggedIn: boolean;
4
}
5

6
const state: Readonly<AppState> = {
7
  currentUserId: "user_01",
8
  isLoggedIn: true,
9
};
10

11
// コンパイルエラーが発生する
12
// error TS2540: Cannot assign to 'isLoggedIn' because it is a read-only property.
13
state.isLoggedIn = false;

1
interface Article {
2
  id: string;
3
  title: string;
4
  content: string;
5
  authorId: string;
6
  publishedAt: Date;
7
}
8

9
// id と title だけを抽出した型を作成
10
type ArticleCardProps = Pick<Article, "id" | "title">;
11

12
// 有効なオブジェクト
13
const cardData: ArticleCardProps = {
14
  id: "article-123",
15
  title: "TypeScriptユーティリティ型の使い方",
16
};
17

18
// オブジェクトリテラルを直接代入する場合、抽出対象外のプロパティを含めるとコンパイルエラーになる
19
// error TS2353: Object literal may only specify known properties, and 'content' does not exist in type 'ArticleCardProps'.
20
const invalidCard: ArticleCardProps = {
21
  id: "article-123",
22
  title: "TypeScriptユーティリティ型の使い方",
23
  content: "本文データ",
24
};

1
interface Article {
2
  id: string;
3
  title: string;
4
  content: string;
5
  authorId: string;
6
  publishedAt: Date;
7
}
8

9
type ArticleCardProps = Pick<Article, "id" | "title">;
10

11
const article: Article = {
12
  id: "article-123",
13
  title: "TypeScript入門",
14
  content: "記事本文",
15
  authorId: "user-01",
16
  publishedAt: new Date(),
17
};
18

19
// 既存の変数を代入する場合、余分なプロパティが含まれていても代入可能
20
const card: ArticleCardProps = article;

1
interface Product {
2
  id: string;
3
  name: string;
4
  price: number;
5
  createdAt: Date;
6
  updatedAt: Date;
7
}
8

9
// システム生成の id, createdAt, updatedAt を除外
10
type CreateProductInput = Omit<Product, "id" | "createdAt" | "updatedAt">;
11

12
// 新規登録時の入力データ型として安全に使用できる
13
const newProduct: CreateProductInput = {
14
  name: "エルゴノミクスキーボード",
15
  price: 24800,
16
};

1
type UserRole = "admin" | "editor" | "viewer";
2

3
interface RoleConfig {
4
  canDelete: boolean;
5
  canEdit: boolean;
6
}
7

8
// UserRole の各キーを漏れなく網羅した設定テーブルを定義
9
const rolePermissions: Record<UserRole, RoleConfig> = {
10
  admin: { canDelete: true, canEdit: true },
11
  editor: { canDelete: false, canEdit: true },
12
  viewer: { canDelete: false, canEdit: false },
13
};

1
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
2

3
// 安全な読み取り専用メソッド（GET）を除外し、状態変更を伴うメソッドだけを抽出
4
type MutateMethod = Exclude<HttpMethod, "GET">;
5
// 結果: "POST" | "PUT" | "DELETE" | "PATCH"

1
type EventType = "click" | "hover" | "keydown" | "keyup" | "resize";
2
type KeyEventType = Extract<EventType, "keydown" | "keyup" | "keypress">;
3
// 結果: "keydown" | "keyup"

1
type NullableString = string | null | undefined;
2

3
type CleanString = NonNullable<NullableString>;
4
// 結果: string

1
function buildUserProfile(id: string, name: string) {
2
  return {
3
    id,
4
    name,
5
    isPremium: false,
6
    createdAt: new Date(),
7
    metadata: {
8
      loginCount: 0,
9
      lastLoginIp: "127.0.0.1",
10
    },
11
  };
12
}
13

14
// 関数の返り値の型を自動抽出
15
type UserProfile = ReturnType<typeof buildUserProfile>;
16

17
// 推論される型:
18
// {
19
//   id: string;
20
//   name: string;
21
//   isPremium: boolean;
22
//   createdAt: Date;
23
//   metadata: { loginCount: number; lastLoginIp: string; };
24
// }

1
function notifyUser(userId: string, message: string, retryCount: number) {
2
  console.log(`送信: ${userId} -> ${message} (試行: ${retryCount})`);
3
}
4

5
// 引数の型をタプルとして取得: [userId: string, message: string, retryCount: number]
6
type NotifyArgs = Parameters<typeof notifyUser>;
7

8
// 第1引数の型を取り出す場合
9
type UserIdArg = NotifyArgs[0]; // string

1
type UserResponse = Promise<{
2
  id: string;
3
  name: string;
4
}>;
5

6
// Promiseの内部にある型を抽出
7
type User = Awaited<UserResponse>;
8
// 結果:
9
// {
10
//   id: string;
11
//   name: string;
12
// }
13

14
// ネストされたPromiseも再帰的に展開される
15
type NestedPromise = Awaited<Promise<Promise<string>>>;
16
// 結果: string

1
interface Account {
2
  id: string;
3
  email: string;
4
  passwordHash: string;
5
  nickname: string;
6
  bio: string;
7
  avatarUrl: string;
8
}
9

10
// ユーザーがマイページで編集可能な項目だけを Pick し、さらに Partial で任意にする
11
type ProfileUpdateRequest = Partial<Pick<Account, "nickname" | "bio" | "avatarUrl">>;
12

13
// 有効な更新リクエスト例（bio のみ更新）
14
const updatePayload: ProfileUpdateRequest = {
15
  bio: "フロントエンドエンジニアです。",
16
};

1
interface Task {
2
  id: string;
3
  title: string;
4
  completed: boolean;
5
  priority: "low" | "medium" | "high";
6
}
7

8
// id 以外のプロパティをオプショナルにし、必須の id と交差型（&）で合体させる
9
type UpdateTaskPayload = { id: string } & Partial<Omit<Task, "id">>;
10

11
// id は必須だが、変更したい項目だけを指定できる
12
const taskUpdate: UpdateTaskPayload = {
13
  id: "task_456",
14
  completed: true,
15
};

1
interface Company {
2
  name: string;
3
  address: {
4
    city: string;
5
    zipCode: string;
6
  };
7
}
8

9
type ReadonlyCompany = Readonly<Company>;
10

11
const company: ReadonlyCompany = {
12
  name: "サンプル株式会社",
13
  address: {
14
    city: "東京都千代田区",
15
    zipCode: "100-0001",
16
  },
17
};
18

19
// ❌ 直下のプロパティの書き換えは防げる
20
// company.name = "変更後"; // コンパイルエラー
21

22
// ⚠️ ネストされた内部オブジェクトのプロパティは変更できてしまう
23
company.address.city = "大阪市北区"; // エラーにならず変更可能

1
interface Customer {
2
  id: string;
3
  name: string;
4
}
5

6
// 正しく id を除外
7
type CustomerInput1 = Omit<Customer, "id">; // { name: string }
8

9
// 存在しないキー "nonExistentKey" を指定してもコンパイルエラーにならない
10
type CustomerInput2 = Omit<Customer, "nonExistentKey">; // { id: string; name: string } のまま

1
function getValue(value: string): string;
2
function getValue(value: number): number;
3
function getValue(value: string | number): string | number {
4
  return value;
5
}
6

7
// 最後のオーバーロードシグネチャ（value: number => number）が対象になる
8
type ValueReturn = ReturnType<typeof getValue>; // number
9
type ValueParams = Parameters<typeof getValue>; // [value: number]