typescript

TypeScript

概要

TypeScript は静的型付けを備えた JavaScript です。コンパイル時の型チェッカーが追加されますが、実行時の動作は JavaScript と同じです。実行時のタスク（リストの並べ替え、DOM、非同期処理など）には、JavaScript の知識が TypeScript にも活かせます。型、インターフェース、ジェネリクス、および優れたツールを活用するには TypeScript を使います。

基本的な考え方：型は形状と契約を表し、コンパイラーは実行前に型エラーを検出します。ベストプラクティスとして、tsconfig.json で strict を有効にしてください。

---

クイックリファレンス

概念	構文／メモ
型注釈	let x: string, function f(n: number): void
インターフェース	interface User { name: string; id: number }
型エイリアス	type Id = string | number
ユニオン	string または number（ユニオン型）
オプショナル	prop?: string または prop: string | undefined
ジェネリクス	function id<T>(x: T): T { return x }
スキーマから型を推論	ライブラリを使います（例：Zod の z.infer<typeof schema>）

---

日常的に使う型

• プリミティブ型：string、number、boolean、bigint、symbol。
• 配列：number[] または Array<number>。
• Any：any — 型チェックを無効にします。可能な限り避けてください。本当に不明なデータには unknown を使い、使用前に型を絞り込むことをおすすめします。
• 型注釈（後置）：const name: string = "x"、function greet(name: string): string { return "Hi " + name }。
• オブジェクト型：{ name: string; age?: number } または interface User { name: string; age?: number }。
• ユニオン型：string | number、リテラル型："a" | "b"。

---

型の絞り込み

条件分岐を使って型を絞り込むと、TypeScript が型を推論できます。

• typeof：if (typeof x === "string") { ... }
• 真偽値の判定：if (value) { ... }
• 等価性：if (x === null) { ... }
• in：if ("name" in obj) { ... }
• 型ガード：function isFish(pet: Fish | Bird): pet is Fish { ... }
• 判別可能なユニオン：共通のリテラルフィールド（例：kind: "circle"）を使い、それに基づいて switch 文で分岐します。

---

関数

• シグネチャ：(a: string, b?: number) => boolean。戻り値がない場合は void を使います。
• オーバーロード：複数の呼び出しシグネチャと、1 つの実装を定義します。
• ジェネリクス：function first<T>(arr: T[]): T \| undefined。
• 制約：function longest<T extends { length: number }>(a: T, b: T): T。

---

オブジェクト型と型の操作

• インターフェース：interface Point { x: number; y: number }。拡張には extends を使います。
• インデックスシグネチャ：[key: string]: number。
• keyof：type K = keyof User → キーのユニオン型。
• typeof：type C = typeof config（値 → 型）。
• インデックスアクセス型：type Name = User["name"]。
• マップ型：type Readonly<T> = { readonly [K in keyof T]: T[K] }。
• 条件型：type F = T extends string ? number : boolean。
• テンプレートリテラル型：type E = `on${Capitalize<Event>}`。
• ユーティリティ型：Partial<T>、Required<T>、Pick<T, K>、Omit<T, K>、Record<K, V>、Exclude<T, U>、Extract<T, U>、NonNullable<T>、ReturnType<F>、Parameters<F>。

---

クラス

• メンバー：class C { prop: number; method(): void {} }。
• コンストラクター：constructor(public name: string) {}（パラメータプロパティ）。
• 実装：class D implements I {}。
• 拡張：class Child extends Parent {}。
• 必要に応じて Readonly、private、protected を使います。

---

モジュール

• ES モジュール：import { x } from "./file"、export const x = 1、export type { T }。
• デフォルトエクスポート：export default App、import App from "./App"。
• Namespace（レガシー）：ES モジュールをおすすめします。

---

プロジェクト設定：tsconfig.json

• strict："strict": true を設定します（推奨）。strictNullChecks、noImplicitAny、strictFunctionTypes などが有効になります。
• target：例："ES2022" または "ESNext"。
• module：例："ESNext"、Node 用の "NodeNext"。
• moduleResolution：バンドラーを使用する場合は "bundler"、Node 用には "NodeNext"。
• paths：パスエイリアスには "@/*": ["./src/*"] を指定します。
• include / exclude：コンパイル対象のファイルを指定します。
• References：大規模なモノレポでは、プロジェクト参照を使用します。

公式の TSConfig リファレンスへのリンクは reference.md をご覧ください。

---

ベストプラクティス

• strict モードを有効にします。
• 拡張する可能性のあるオブジェクトの形状には interfaces を、ユニオン型、マップ型、エイリアスには type を使用します。
• 可能な限り const と readonly を使用します。
• 外部データには any ではなく unknown を使用し、使用前に型を絞り込みます。
• generics を使って、関数の再利用性と型安全性を保ちます。
• 実行時の検証と型定義には、スキーマライブラリ（例：Zod）を使用し、z.infer<typeof schema> で型を推論します。

---

よくある間違い

• any：使用を避けます。代わりに unknown を使って型を絞り込むか、適切な型を指定します。
• Non-null assertion (!)：必要な場合に限って使用します。型の絞り込みやオプショナルチェーンを優先します。
• Type assertions (as)：外部から取得したデータには、型ガードまたはスキーマ検証を優先します。
• Strict を無効にする：strict: true を維持し、無効にするのではなくエラーを修正します。

---

追加リソース

• reference.md — 公式ドキュメントへのリンク（Handbook、Reference、TSConfig、チートシート）。
• 公式：https://www.typescriptlang.org/docs — はじめに、Handbook、Reference、TSConfig。