TypeScriptチートシート

基本的な型

// プリミティブ型
const name: string = "Alice";
const age: number = 25;
const isActive: boolean = true;
const id: bigint = 100n;
const symbol: symbol = Symbol("id");

// 配列
const numbers: number[] = [1, 2, 3];
const names: Array<string> = ["Alice", "Bob"];

// タプル
const tuple: [string, number] = ["Alice", 25];
const namedTuple: [name: string, age: number] = ["Alice", 25];

// オブジェクト
const user: { name: string; age: number } = { name: "Alice", age: 25 };

// any, unknown, never
let anyValue: any = "anything";
let unknownValue: unknown = "must check type";
function throwError(): never {
  throw new Error("error");
}

型エイリアスとインターフェース

// 型エイリアス
type User = {
  id: string;
  name: string;
  email: string;
};

type ID = string | number;

// インターフェース
interface Product {
  id: string;
  name: string;
  price: number;
}

// 拡張
interface AdminUser extends User {
  role: "admin";
  permissions: string[];
}

type ExtendedProduct = Product & {
  category: string;
};

ユニオン型とインターセクション型

// ユニオン型（いずれか）
type Status = "pending" | "approved" | "rejected";
type StringOrNumber = string | number;

// インターセクション型（両方）
type Employee = User & { department: string };

// 判別可能なユニオン
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: string };

function handleResult(result: Result<string>) {
  if (result.success) {
    console.log(result.data); // string
  } else {
    console.log(result.error); // string
  }
}

ジェネリクス

// 関数
function identity<T>(value: T): T {
  return value;
}

// 複数の型パラメータ
function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

// 制約付きジェネリクス
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// インターフェース
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// クラス
class Container<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

ユーティリティ型

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

// Partial - 全てオプショナルに
type PartialUser = Partial<User>;
// { id?: string; name?: string; email?: string; age?: number; }

// Required - 全て必須に
type RequiredUser = Required<User>;

// Readonly - 読み取り専用に
type ReadonlyUser = Readonly<User>;

// Pick - 特定のプロパティのみ
type UserName = Pick<User, "id" | "name">;
// { id: string; name: string; }

// Omit - 特定のプロパティを除外
type UserWithoutEmail = Omit<User, "email">;

// Record - キーと値の型を指定
type UserRecord = Record<string, User>;

// Exclude - ユニオンから除外
type Status = "pending" | "approved" | "rejected";
type ActiveStatus = Exclude<Status, "rejected">;
// "pending" | "approved"

// Extract - ユニオンから抽出
type ExtractedStatus = Extract<Status, "pending" | "approved">;

// NonNullable - nullとundefinedを除外
type NonNullableString = NonNullable<string | null | undefined>;

// ReturnType - 関数の戻り値の型
function getUser() {
  return { id: "1", name: "Alice" };
}
type UserReturn = ReturnType<typeof getUser>;

// Parameters - 関数のパラメータの型
type GetUserParams = Parameters<typeof getUser>;

型ガード

// typeof
function process(value: string | number) {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  return value * 2;
}

// instanceof
function handleError(error: Error | string) {
  if (error instanceof Error) {
    return error.message;
  }
  return error;
}

// in演算子
interface Dog {
  bark(): void;
}
interface Cat {
  meow(): void;
}

function speak(animal: Dog | Cat) {
  if ("bark" in animal) {
    animal.bark();
  } else {
    animal.meow();
  }
}

// カスタム型ガード
function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value
  );
}

条件型

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

// infer
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type Result = UnwrapPromise<Promise<string>>; // string

// 配列の要素型
type ArrayElement<T> = T extends (infer U)[] ? U : never;
type Item = ArrayElement<string[]>; // string

// 関数の戻り値
type ReturnOf<T> = T extends (...args: any[]) => infer R ? R : never;

Mapped Types

// 基本
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

// 修飾子の操作
type Mutable<T> = {
  -readonly [K in keyof T]: T[K];
};

type OptionalToRequired<T> = {
  [K in keyof T]-?: T[K];
};

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

type UserGetters = Getters<User>;
// { getId: () => string; getName: () => string; ... }

テンプレートリテラル型

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type Endpoint = "/users" | "/products";

// 組み合わせ
type ApiRoute = `${HttpMethod} ${Endpoint}`;
// "GET /users" | "GET /products" | "POST /users" | ...

// ケース変換
type UpperCase = Uppercase<"hello">; // "HELLO"
type LowerCase = Lowercase<"HELLO">; // "hello"
type Capitalize = Capitalize<"hello">; // "Hello"
type Uncapitalize = Uncapitalize<"Hello">; // "hello"

よくあるパターン

// nullable型
type Nullable<T> = T | null;
type Optional<T> = T | undefined;
type Maybe<T> = T | null | undefined;

// Result型
type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

// 再帰型
type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

// 読み取り専用配列
type ReadonlyArray<T> = readonly T[];

// 非同期関数の戻り値
type AsyncReturnType<T extends (...args: any) => Promise<any>> =
  T extends (...args: any) => Promise<infer R> ? R : never;

実用Tips

// as const で リテラル型に
const colors = ["red", "green", "blue"] as const;
type Color = typeof colors[number]; // "red" | "green" | "blue"

// satisfies で型チェック（推論を維持）
const config = {
  port: 3000,
  host: "localhost",
} satisfies Record<string, string | number>;

// オブジェクトからユニオン型
const statusMap = {
  pending: "保留中",
  approved: "承認済み",
  rejected: "拒否",
} as const;
type Status = keyof typeof statusMap; // "pending" | "approved" | "rejected"

関連記事

• TypeScript入門 - 基礎から学ぶ
• React Hooks - Reactでの型活用
• Zod入門 - 実行時型検証