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
  }
}

引用・参考リンク

【公式】TypeScript

Related Cheatsheets

Related Goods

「今の時代に一つだけ言語を学ぶなら？」私は自信を持ってTypeScriptと答えます。TypeScriptを体系的に学ぶのにおすすめの一冊です。
詳細をみる
日本で一番売れているJavaScript本です。 2023年に大幅改訂されました。
詳細をみる
Next.jsをゼロから学べます！今やNext.jsはWeb開発のデファクトスタンダードとなりました。
詳細をみる
ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。スタイリッシュなデザインで、Apple製品との相性抜群です。
詳細をみる
お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)

すべてのチートシートを見る

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

基本型