TypeScriptの基本

TypeScriptとは？

TypeScriptはJavaScriptに型システムを追加した言語です。 JavaScriptのコードはすべて有効なTypeScriptですが、TypeScriptではさらに「型注釈（Type Annotation）」を書くことで、 変数や関数がどんな値を扱うかを明示できます。

型を宣言することで、コードを実行する前にエラーを発見できます。 例えば、数値を期待する関数に文字列を渡してしまうようなバグを、コンパイル時に検出できます。

• 静的型チェック — 実行前にエラーを発見
• 型推論 — すべてに型を書かなくても自動推論される
• IDEサポート — 自動補完、リファクタリング、ホバー情報
• 段階的導入 — 既存のJSプロジェクトに少しずつ導入可能

型注釈の基本構文

TypeScriptでは変数名の後に: 型名を付けて型を指定します。 これを「型注釈（Type Annotation）」と呼びます。

// TypeScript: 型注釈あり
let message: string = "こんにちは";
let count: number = 42;
let isActive: boolean = true;

// 型推論: 初期値から自動的に型が決まる
let name = "太郎";    // string と推論される
let age = 25;          // number と推論される
let done = false;      // boolean と推論される

// 型エラーの例（コンパイル時にエラーになる）
// message = 123;      // Error: Type 'number' is not assignable to type 'string'
// count = "hello";    // Error: Type 'string' is not assignable to type 'number'

関数の型注釈

関数では引数と戻り値に型を指定できます。これにより、関数の使い方が明確になり、 間違った引数を渡すとコンパイル時にエラーが出ます。

// 引数と戻り値に型を指定
function greet(name: string): string {
  return "こんにちは、" + name + "さん！";
}

// アロー関数
const add = (a: number, b: number): number => {
  return a + b;
};

// 戻り値がない関数は void
function log(message: string): void {
  console.log(message);
}

// オプション引数（?をつける）
function createUser(name: string, age?: number): string {
  if (age !== undefined) {
    return name + "（" + age + "歳）";
  }
  return name;
}

// デフォルト値
function repeat(text: string, times: number = 3): string {
  return text.repeat(times);
}

// 正しい呼び出し
greet("太郎");           // OK
add(1, 2);               // OK
createUser("花子");      // OK（ageは省略可能）
createUser("花子", 25);  // OK

// エラーになる呼び出し
// greet(123);           // Error: number は string に割り当てられない
// add("1", "2");        // Error: string は number に割り当てられない

コンパイルの仕組み

TypeScriptはブラウザやNode.jsで直接実行できません。tscコマンド（TypeScriptコンパイラ）で JavaScriptに変換（トランスパイル）してから実行します。

// TypeScript (.ts ファイル)
function greet(name: string): string {
  return "Hello, " + name;
}
const msg: string = greet("World");

// ↓ tsc でコンパイル ↓

// JavaScript (.js ファイル) — 型注釈が消える
function greet(name) {
  return "Hello, " + name;
}
const msg = greet("World");

コンパイル後のJavaScriptには型情報は残りません。型チェックはコンパイル時のみ行われます。 これを「構造的型付け（Structural Typing）」と呼びます。

tsconfig.json

TypeScriptプロジェクトの設定はtsconfig.jsonで管理します。 コンパイルオプション、対象ファイル、出力先などを指定します。

// tsconfig.json の例
{
  "compilerOptions": {
    "target": "ES2020",          // 出力するJSのバージョン
    "module": "ESNext",          // モジュールシステム
    "strict": true,              // 厳格な型チェックを有効化
    "outDir": "./dist",          // 出力先ディレクトリ
    "rootDir": "./src",          // ソースディレクトリ
    "esModuleInterop": true,     // CommonJSとの互換性
    "skipLibCheck": true,        // .d.tsファイルのチェックをスキップ
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],       // コンパイル対象
  "exclude": ["node_modules"]    // 除外ファイル
}

"strict": trueは特に重要です。 これを有効にすると、strictNullChecks、noImplicitAnyなど 複数の厳格チェックがまとめて有効になります。

まとめ

• TypeScriptはJavaScriptに型を追加した言語
• : 型名で型注釈を書く
• 型推論により、すべてに型を書く必要はない
• コンパイル時にエラーを検出し、実行前にバグを防ぐ
• tsconfig.jsonでプロジェクトの設定を管理
• コンパイル後は通常のJavaScriptとして動作する