CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

TypeScript

エンジニアのためのWebチートシート

TypeScriptはMicrosoftが開発したJavaScriptのスーパーセットです。 静的型付けにより、開発時のエラー検出やコード補完が強化されます。 基本型、高度な型、ユーティリティ型、型ガードなどをチートシートにまとめました。

基本型

string

  • 文字列型です。シングルクォート、ダブルクォート、テンプレートリテラルが使えます。

    const name: string = "TypeScript"
const greeting: string = `Hello, ${name}!`

number

  • 整数・浮動小数点を含む数値型です。

    const age: number = 25
const pi: number = 3.14
const hex: number = 0xff

boolean

  • true / false の真偽値型です。

    const isDone: boolean = true
const isActive: boolean = false

Array

  • 配列型は2つの書き方があります。

    // 方法1: type[]
const numbers: number[] = [1, 2, 3]

// 方法2: Array<type>
const strings: Array<string> = ["a", "b", "c"]

Tuple（タプル）

  • 要素の型と数が固定された配列です。

    const tuple: [string, number] = ["age", 25]
const rgb: [number, number, number] = [255, 128, 0]

// ラベル付きタプル
type Point = [x: number, y: number]

Enum（列挙型）

  • 名前付き定数のセットを定義します。

    enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

const dir: Direction = Direction.Up

any / unknown

  • anyは型チェックを無効化します。unknownはanyの型安全版で、使用前に型チェックが必要です。

    // any: 型チェック無効（非推奨）
let anything: any = "hello"
anything = 42

// unknown: 型安全版のany
let value: unknown = "hello"
if (typeof value === "string") {
  console.log(value.toUpperCase())
}

void / never

  • voidは戻り値がないことを示します。neverは決して到達しない値の型です。

    // void: 戻り値なし
function log(msg: string): void {
  console.log(msg)
}

// never: 到達しない
function throwError(msg: string): never {
  throw new Error(msg)
}

高度な型

Union型（共用体型）

  • 複数の型のいずれかを許容する型です。

    type StringOrNumber = string | number

function display(value: StringOrNumber) {
  if (typeof value === "string") {
    console.log(value.toUpperCase())
  } else {
    console.log(value.toFixed(2))
  }
}

Intersection型（交差型）

  • 複数の型を結合して、すべてのプロパティを持つ型を作ります。

    type HasName = { name: string }
type HasAge = { age: number }

type Person = HasName & HasAge

const person: Person = {
  name: "Taro",
  age: 25
}

リテラル型

  • 特定の値のみを許容する型です。

    type Theme = "light" | "dark"
type StatusCode = 200 | 404 | 500

const theme: Theme = "dark"
const status: StatusCode = 200

Optional（オプショナル）

  • ?を付けるとプロパティや引数を省略可能にできます。

    interface Config {
  host: string
  port?: number  // optional
}

function greet(name: string, greeting?: string) {
  return `${greeting ?? "Hello"}, ${name}`
}

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

インターフェースの基本

  • オブジェクトの型を定義します。

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

const user: User = {
  id: 1,
  name: "Taro",
  email: "taro@example.com"
}

インターフェースの継承

  • extendsを使ってインターフェースを拡張できます。

    interface Animal {
  name: string
}

interface Dog extends Animal {
  breed: string
}

const dog: Dog = {
  name: "Pochi",
  breed: "Shiba Inu"
}

型エイリアス

  • typeキーワードで型に別名を付けることができます。Union型やタプルにはtypeを使います。

    // Union型（interfaceでは不可）
type Result = "success" | "error"

// タプル型
type Coordinate = [number, number]

// オブジェクト型
type Point = {
  x: number
  y: number
}

ジェネリクス

ジェネリック関数

  • 型パラメータを使って、様々な型で動作する関数を作れます。

    function identity<T>(value: T): T {
  return value
}

const str = identity<string>("hello")
const num = identity(42)  // 型推論

ジェネリックインターフェース

  • インターフェースにも型パラメータを使えます。

    interface ApiResponse<T> {
  data: T
  status: number
  message: string
}

const response: ApiResponse<User[]> = {
  data: [{ id: 1, name: "Taro", email: "taro@example.com" }],
  status: 200,
  message: "OK"
}

ジェネリック制約

  • extendsを使って型パラメータに制約を付けることができます。

    interface HasLength {
  length: number
}

function logLength<T extends HasLength>(value: T): void {
  console.log(value.length)
}

logLength("hello")     // OK
logLength([1, 2, 3])   // OK
// logLength(123)      // Error

ユーティリティ型

Partial<T>

  • すべてのプロパティをオプショナルにします。

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

function updateUser(user: User, updates: Partial<User>) {
  return { ...user, ...updates }
}

Pick<T, K> / Omit<T, K>

  • Pickは指定したプロパティのみ抽出します。Omitは指定したプロパティを除外します。

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

// 指定プロパティのみ抽出
type UserPreview = Pick<User, "id" | "name">

// 指定プロパティを除外
type PublicUser = Omit<User, "password">

Record<K, V>

  • キーの型Kと値の型Vからオブジェクト型を作ります。

    type Role = "admin" | "user" | "guest"

const permissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"]
}

Readonly<T>

  • すべてのプロパティを読み取り専用にします。

    interface Config {
  host: string
  port: number
}

const config: Readonly<Config> = {
  host: "localhost",
  port: 3000
}
// config.port = 8080  // Error!

ReturnType<T>

  • 関数型の戻り値の型を抽出します。

    function getUser() {
  return { id: 1, name: "Taro" }
}

type UserType = ReturnType<typeof getUser>
// { id: number; name: string }

型ガード

typeof ガード

  • typeofを使ってプリミティブ型を判定します。

    function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + value
  }
  return padding + value
}

in ガード

  • in演算子を使ってプロパティの存在を判定します。

    interface Fish { swim: () => void }
interface Bird { fly: () => void }

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim()
  } else {
    animal.fly()
  }
}

カスタム型ガード

  • is構文を使ってユーザー定義の型ガード関数を作れます。

    interface Cat { meow: () => void }
interface Dog { bark: () => void }

function isCat(animal: Cat | Dog): animal is Cat {
  return "meow" in animal
}

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

デコレータ & 修飾子

as const

  • オブジェクトや配列をリテラル型として扱い、readonlyにします。

    // as const でリテラル型 & readonly
const colors = ["red", "green", "blue"] as const
// type: readonly ["red", "green", "blue"]

const config = {
  endpoint: "/api",
  timeout: 3000,
} as const
// config.timeout = 5000  // Error!

satisfies 演算子

  • 型の互換性をチェックしつつ、推論された型を保持します（TypeScript 4.9+）。

    type Color = "red" | "green" | "blue"
type ColorMap = Record<Color, string | number[]>

const palette = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff",
} satisfies ColorMap

// 型が推論で保持される
palette.green.map(v => v * 2)  // OK!

テンプレートリテラル型

  • テンプレートリテラルを使って文字列型を動的に生成できます。

    type EventName = "click" | "focus" | "blur"
type Handler = `on${Capitalize<EventName>}`
// "onClick" | "onFocus" | "onBlur"

type CSSUnit = "px" | "em" | "rem"
type CSSValue = `${number}${CSSUnit}`
const width: CSSValue = "100px"

モジュール & 宣言

import / export

  • ESModulesの構文でモジュールをインポート・エクスポートします。型のみのインポートにはimport typeを使います。

    // Named export
export interface User { name: string }
export function getUser(): User { ... }

// Default export
export default class Api { ... }

// Import
import { User, getUser } from "./user"
import Api from "./api"

// Type-only import
import type { User } from "./user"

型宣言（declare）

  • declareを使って外部モジュールやグローバル変数の型を宣言します。

    // グローバル変数の宣言
declare const API_URL: string

// モジュールの型宣言
declare module "*.css" {
  const styles: Record<string, string>
  export default styles
}

// 既存モジュールの拡張
declare module "express" {
  interface Request {
    userId?: string
  }
}