TypeScript: 型安全なJavaScript

コンパイル時にバグを発見。大規模開発の必須ツール。

TypeScript
JavaScript + 静的型システム。
interface
オブジェクトの形を定義。
ジェネリクス
型をパラメータ化。

TypeScript基礎

高機能なスペルチェッカー (Advanced Spell Checker)

TypeScript は「コードのスペルチェッカー」です。JavaScript では実行するまで気づかないミス（タイプミスや型の不一致）を、書いているそばから赤線で教えてくれます。完成した本（コンパイル後）は普通の JavaScript なので、どのブラウザでも読めます。

JavaScript の「柔軟さ」は、大規模開発では「脆さ」になります。TypeScript はそこに「型（Type）」というルールを追加し、堅牢にします。今の Web 開発では事実上の標準（デファクトスタンダード）です。

Basic Types
// 型の指定
let name: string = 'Alice';
let age: number = 30;
let active: boolean = true;


// 関数の型
function greet(name: string): string {
    return `Hello, ${name}!`;
}


// 配列とオブジェクト
const nums: number[] = [1, 2, 3];
const user: { name: string; age: number } = { name: 'Bob', age: 25 };
Bad (JS)
// ❌ JavaScript: 型エラーが実行時に発覚
function add(a, b) {
    return a + b;
}
add('1', 2);  // '12' — バグ！
Good (TS)
// ✅ TypeScript: コンパイル時に発覚
function add(a: number, b: number): number {
    return a + b;
}
add('1', 2);  // エラー: string は number に代入不可

型定義

Interfaces & Generics
// インターフェース
interface User {
    id: number;
    name: string;
    email?: string;  // オプショナル
}


// 型エイリアス
type ID = string | number;
type Status = 'pending' | 'active' | 'closed';


// ジェネリクス
function first<T>(arr: T[]): T | undefined {
    return arr[0];
}


const n = first([1, 2, 3]);      // number
const s = first(['a', 'b']);     // string
Tip: interface はオブジェクトに、type は Union に使い分け。

合格ライン

☐ 基本型（string, number, boolean）を使える
☐ interface を定義できる

演習課題

課題1: 基本型
変数に型を付けてください。
課題2: interface
interface を定義してください。