TypeScriptの基本

本記事では、TypeScriptの基本について解説します。

「TypeScriptって何？」「JavaScriptと何が違うの？」「なぜ実務で使われるの？」 といった疑問を、基礎から整理していきます。

---

1. TypeScriptとは？

TypeScriptは、JavaScriptに型（Type）を追加した言語です。

Microsoftによって開発され、現在はフロントエンド・バックエンド問わず広く使われています。

特徴

• JavaScriptのスーパーセット（JSのコードはそのまま動く）
• 静的型付け
• コンパイルしてJavaScriptに変換される

---

2. なぜTypeScriptを使うのか？

■ 型安全性

JavaScriptは動的型付け言語のため、実行時エラーが発生しやすいです。

function add(a, b) {
  return a + b;
}

add(1, "2"); // "12" になってしまう

TypeScriptでは型を指定できます。

function add(a: number, b: number): number {
  return a + b;
}

誤った型を渡すと、コンパイル時にエラーになります。

---

3. 基本の型

■ number

let age: number = 20;

■ string

let name: string = "Taro";

■ boolean

let isActive: boolean = true;

■ 配列

let numbers: number[] = [1, 2, 3];

別の書き方：

let numbers: Array<number> = [1, 2, 3];

---

4. 型推論

TypeScriptは値から型を自動推論します。

let count = 10; // number と推論される

必ずしもすべてに型を書く必要はありません。

---

5. 関数の型定義

function greet(name: string): string {
  return `こんにちは、${name}`;
}

アロー関数

const greet = (name: string): string => {
  return `こんにちは、${name}`;
};

---

6. オブジェクトの型

let user: { name: string; age: number } = {
  name: "Taro",
  age: 25,
};

ただし、実務では後述する「interface」を使うのが一般的です。

---

7. interface（インターフェース）

オブジェクトの型を定義する仕組みです。

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Taro",
  age: 25,
};

オプションプロパティ

interface User {
  name: string;
  age?: number;
}

?を付けると省略可能になります。

---

8. 型エイリアス（type）

type User = {
  name: string;
  age: number;
};

interfaceとの違い

• interface：オブジェクト向き
• type：ユニオン型など柔軟

---

9. ユニオン型

複数の型を許可できます。

let id: number | string;

---

10. any型（注意）

let value: any = "hello";

anyを使うと型チェックが無効になります。

👉 可能な限り避けるのがベスト。

---

11. unknown型

let value: unknown;

anyより安全で、使用前に型チェックが必要です。

---

12. TypeScriptの実行までの流れ

1. TypeScript（.ts）を書く
2. コンパイル（tsc）
3. JavaScript（.js）に変換
4. ブラウザやNode.jsで実行

---

まとめ

• TypeScriptはJavaScriptに型を追加した言語
• 型によってバグを未然に防げる
• interfaceやtypeが重要
• anyの使いすぎに注意

---