TypeScript基礎（型システムとPythonとの対比）

TypeScriptはJavaScriptに静的型付けを追加した言語で、コンパイル時に型エラーを検出できる。Pythonの型ヒント（PEP 484）とmypyの組み合わせに近い概念だが、TypeScriptはより厳格でエコシステム全体で型情報が活用される。

型アノテーションの基本

# Python型ヒント
def greet(name: str) -> str:
    return f"Hello, {name}"

age: int = 30

// TypeScript
function greet(name: string): string {
  return `Hello, ${name}`;
}

const age: number = 30;

基本の型：

const name: string = "Wataru";
const age: number = 40;
const active: boolean = true;
const data: null = null;
const value: undefined = undefined;

// 配列
const scores: number[] = [85, 92, 78];
const names: Array<string> = ["Alice", "Bob"];

// 任意の型（型安全性を失う・基本使わない）
const anything: any = "whatever";

interfaceとtype

オブジェクトの形（構造）を定義する：

# Python
from dataclasses import dataclass
@dataclass
class Patient:
    id: str
    name: str
    age: int

// TypeScript - interface
interface Patient {
  id: string;
  name: string;
  age: number;
  email?: string;  // ? は省略可能（optional）
}

// type エイリアス
type Status = "active" | "inactive" | "pending";  // ユニオン型
type ID = string | number;

interface と type の使い分け：オブジェクトの形を表すなら interface、プリミティブや共用体・交差型には type。実際はどちらでも動くことが多い。

型推論

明示的に型を書かなくても、TypeScriptが推論してくれる：

const name = "Wataru";     // TypeScriptが string と推論
const scores = [85, 92];   // number[] と推論

// 関数の戻り値も推論される
function add(a: number, b: number) {
  return a + b;  // 戻り値は number と推論
}

ジェネリクス

型をパラメータとして受け取り、再利用性を高める：

# Python
from typing import TypeVar, Generic
T = TypeVar('T')
def first(items: list[T]) -> T:
    return items[0]

// TypeScript
function first<T>(items: T[]): T {
  return items[0];
}

const num = first([1, 2, 3]);      // T は number
const str = first(["a", "b"]);     // T は string

// APIレスポンスの型付けでよく使う
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

実践的な使い方

APIレスポンスの型定義は最も重要なユースケース：

interface PatientReport {
  id: string;
  patientId: string;
  date: string;
  biomarkers: {
    glucose: number;
    hba1c: number;
  };
}

// fetch の型付け
async function fetchReport(id: string): Promise<PatientReport> {
  const res = await fetch(`/api/reports/${id}`);
  return res.json() as PatientReport;
}

型を定義することで、エディタ（VS Code）が自動補完・エラー検出をしてくれる。Claude Codeも型情報を読んでより正確なコード生成を行う。

tsconfig.json

TypeScriptのコンパイル設定ファイル。重要な設定：

{
  "compilerOptions": {
    "strict": true,         // 厳格モード（推奨）
    "target": "ES2022",     // 出力するJSのバージョン
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve"       // Reactを使う場合
  }
}

"strict": true を設定すると、null 安全性チェックなど多くのルールが有効になる。最初は制約に感じるが、バグを早期に発見できる。

参考リソース

• TypeScript公式ドキュメント（https://www.typescriptlang.org/docs/）
• TypeScript Playground（https://www.typescriptlang.org/play）— ブラウザで型を試せる
• 『プロを目指す人のためのTypeScript入門』鈴木僚太著（技術評論社）
• Python typing → TypeScript 対応表（https://mypy.readthedocs.io/ と比較しながら読む）

---

確認クイズ

Q1. TypeScriptで省略可能なプロパティを定義するとき、プロパティ名の後に付ける記号はどれか。　A. !　B. ?　C. *　D. ~

正解: B. ?

解説: interface や type でプロパティ名の後に ? を付けると省略可能（optional）になり、undefined も許容される。Pythonの Optional[str] に相当する。

Q2. const age = 30; と書いたとき、TypeScriptが推論する型はどれか。　A. int　B. any　C. number　D. integer

正解: C. number

解説: TypeScriptには int や float の区別はなく、整数・浮動小数点数すべてが number 型。明示的に型を書かなくても初期値から型推論が行われる。

Q3. type Status = "active" | "inactive" | "pending" の型定義を何と呼ぶか。

正解: ユニオン型（Union Type）

解説: | で複数の型や値リテラルを組み合わせた型をユニオン型と呼ぶ。この例は文字列リテラルのユニオンで、Status 型の変数には3つの値のいずれかしか代入できない。Pythonの Literal["active", "inactive", "pending"] に相当する。

Q4. tsconfig.json で "strict": true を設定するとどうなるか。

正解: null 安全性チェックなど複数の厳格なルールが一括で有効になり、バグを早期発見しやすくなる

解説: strict は strictNullChecks・strictFunctionTypes など複数のオプションをまとめて有効にするショートカット設定。特に strictNullChecks により null や undefined の扱い漏れをコンパイル時に検出できる。

Q5. interface と type の使い分けとして適切な説明はどれか。　A. interface はオブジェクト定義、type はプリミティブ・ユニオン・交差型に向く　B. type はオブジェクト定義にしか使えない　C. interface はプリミティブ型の定義に使う　D. どちらも完全に同じで使い分け不要

正解: A. interface はオブジェクト定義、type はプリミティブ・ユニオン・交差型に向く

解説: 実際には多くの場面でどちらでも動くが、慣例として interface はオブジェクトの形を表す場合、type はユニオン型（A | B）や交差型（A & B）、プリミティブの別名に使うことが多い。

Q6. ジェネリクスを使う主な目的はどれか。　A. 型チェックを無効にするため　B. 型をパラメータとして受け取り、型安全なまま再利用性を高めるため　C. ランタイムのパフォーマンスを向上させるため　D. インポート文を短くするため

正解: B. 型をパラメータとして受け取り、型安全なまま再利用性を高めるため

解説: function first<T>(items: T[]): T のように <T> で型を受け取ることで、同じ関数を number[] にも string[] にも型安全に使える。Pythonの TypeVar と Generic の組み合わせに相当する。

Q7. any 型を使うことの問題点は何か。

正解: 型安全性が失われ、TypeScriptのコンパイル時エラー検出・エディタの補完・Claude Codeの正確なコード生成が機能しなくなる

解説: any を使うとTypeScriptは型チェックを諦め、実質JavaScriptと同じ状態になる。型情報がないとIDEの補完も機能せず、バグの早期発見というTypeScript最大のメリットが消える。

Q8. async function fetchReport(id: string): Promise の戻り値型 Promise は何を意味するか。

正解: 非同期処理が完了すると PatientReport 型の値が得られることを型として表している

解説: Promise<T> はジェネリクスを使った型で、非同期処理の最終的な解決値の型を指定する。await するとラップが外れて PatientReport 型の値が得られる。

Q9. TypeScriptは何のために「コンパイル時に型エラーを検出する」のか。　A. ブラウザでの実行速度を上げるため　B. 開発中にバグを事前に発見するため　C. ファイルサイズを小さくするため　D. CSSを自動生成するため

正解: B. 開発中にバグを事前に発見するため

解説: コンパイル時のエラー検出により、実行してみるまで気づかなかった型の不一致や undefined 参照を開発段階でつぶせる。これがPythonのmypy静的型チェックと同様の恩恵で、TypeScript採用の主な理由。

Q10. interface ApiResponse で型パラメータ T を使う実践的なユースケースはどれか。

正解: APIエンドポイントごとに異なるレスポンスデータ型を data: T に当てはめて型付けするため（例：ApiResponse<Patient> や ApiResponse<Report[]>）

解説: ApiResponse の共通フィールド（status・message）はそのままに、data フィールドの型だけをエンドポイントごとに変えられる。型ごとに別の interface を作る必要がなくコードの重複を防げる。

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

• 対応 Week: W2
• 参照ブランチ:
• W2: reference/week-2
• 対応 checklist 項目: （直接対応なし）

ブランチの作り方・見方は b00-curriculum-map を参照してください。