Typescriptの基本構文(参照用)

🌟 TypeScriptとは？

• JavaScriptに静的型付けを加えた言語。
• JavaScriptに**コンパイル（トランスパイル）**される。
• 型安全性が高く、大規模開発・チーム開発に向いている。
• .tsという拡張子を持つ。

---

🆚 JavaScriptとの違い

項目	JavaScript	TypeScript
型	動的型付け	静的型付け
実行環境	直接ブラウザやNode.jsで動く	JSにコンパイルしてから実行
エラーチェック	実行時に発見される	コンパイル時に発見される
コーディング支援	弱い	エディタで補完・警告が豊富
インターフェース・ジェネリクス	なし	あり

---

🔧 開発環境について

Node.js

• JavaScriptをサーバー側で動かすためのランタイム。
• TypeScriptもNode上でコンパイルして実行されることが多い。

npm（Node Package Manager）

• Node.js用のパッケージ管理ツール。
• TypeScriptのインストールもこれで行う。

npm install -g typescript

Webpack（簡単に）

• モジュールバンドラー。複数のJSファイルやTSファイル、CSSなどを一つにまとめる。
• Reactなどと組み合わせてよく使われる。

---

📝 TypeScript基本構文と例

1. 変数の型指定

let name: string = "TypeScript";
let age: number = 25;
let isActive: boolean = true;

2. 配列（リスト）

let fruits: string[] = ["apple", "banana"];
let numbers: Array<number> = [1, 2, 3];

3. オブジェクト型（interface / type）

interface User {
  name: string;
  age: number;
  email?: string; // ?はオプショナル
}

const user: User = {
  name: "Alice",
  age: 30
};

type Product = {
  name: string;
  price: number;
};

4. 関数の型定義

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

5. ジェネリクス（Generics）

function identity<T>(arg: T): T {
  return arg;
}

identity<number>(5);      // Tがnumberになる
identity<string>("hello"); // Tがstringになる

6. Union型（OR条件の型）

let value: string | number;
value = "hello";
value = 123;

7. 型のエイリアス（type）

type ID = string | number;

let userId: ID = "abc123";
let adminId: ID = 456;

8. クラス（オブジェクト指向）

class Person {
  public name: string;
  private age: number;
  protected gender: string;

  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  greet(): void {
    console.log(`Hi, I'm ${this.name}`);
  }
}

9. 列挙型（Enum）

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let dir: Direction = Direction.Up;

---

🎯 TypeScriptを使う理由まとめ

• 型チェックができる → バグの早期発見
• 可読性・保守性が高い → 大規模でも安心
• エディタ補完が強力 → 開発効率UP
• JavaScriptと互換性がある → 徐々に導入も可能