TypeScript チートシート

1. TypeScriptとは？

初学者向けの説明

TypeScript（TS）は、Microsoftが開発したJavaScriptのスーパーセットです。
JavaScriptのコードに型安全性を追加し、エラーを事前に防ぐことができます。

主な特徴:

特徴	説明
静的型付け	変数の型を明示できるので、バグを未然に防げる
最新のJavaScript機能	ES6+の機能をサポートし、コンパイル時に古いJSへ変換可能
型推論	明示的な型指定がなくても、適切な型を推測
インターフェース	クラスやオブジェクトの形を定義できる
クラスベースのオブジェクト指向	クラスや継承のサポート

専門者向けの説明

TypeScriptはJavaScriptのスーパーセットであり、静的型付け、構造的型システム、および型推論を備えています。
型定義を導入することで、コードの保守性と信頼性が向上し、大規模な開発でも安全に利用できます。

2. TypeScriptの基本

2.1 型の種類

let とは？

let は変数を宣言するためのキーワードで、再代入が可能です。const とは異なり、後から値を変更できます。

boolean とは？

boolean は真偽値（true または false）を扱う型です。

let isDone: boolean = false;

number とは？

number は整数や浮動小数点を扱う型です。

let age: number = 30;

string とは？

string は文字列を扱う型です。

let name: string = "Taro";

array とは？

array は同じ型の値を複数持つ配列です。

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

tuple とは？

tuple は異なる型の値を固定の順序で持つ配列です。

let tuple: [string, number] = ["hello", 10];

any とは？

any はどんな型でも代入できる型です。型安全性が損なわれるため、できる限り使用を避けるべきです。

let notSure: any = 4;

2.2 インターフェースとは？

TypeScriptのインターフェースは、オブジェクトの形を定義する仕組みです。
クラスやオブジェクトがどのようなプロパティやメソッドを持つべきかを指定できます。

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

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

3. TypeScriptの設定（tsconfig.json）

tsconfig.jsonとは？

tsconfig.json はTypeScriptのコンパイラオプションを定義する設定ファイルです。
このファイルをプロジェクトのルートに置くことで、TypeScriptの動作を統一し、開発者全員が同じ設定でコンパイルできます。

なぜ設定する？

TypeScriptはコンパイル時にJavaScriptへ変換されます。
その際、どのバージョンのJavaScriptに変換するか、どのルールを適用するかを制御するために tsconfig.json を設定します。

例:

{
  "compilerOptions": {
    "target": "ES6", // 出力するJavaScriptのバージョン
    "module": "CommonJS", // モジュールの形式
    "strict": true, // 厳格な型チェックを有効化
    "esModuleInterop": true // ESモジュールとの互換性を確保
  }
}

4. TypeScriptのレイヤー構造

各レイヤーの特徴

レイヤー	役割	主な技術
プレゼンテーション層	UIを管理	React, Angular
ビジネスロジック層	データ処理	TypeScript, Express
データアクセス層	DB操作	TypeORM, Prisma

フロー図（Mermaid.js）

graph TD;
  A[ユーザー入力] --> B[プレゼンテーション層];
  B --> C[ビジネスロジック層];
  C --> D[データアクセス層];
  D -->|DBクエリ| E[データベース];

5. TypeScriptの実装例

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

console.log(greet("Taro"));

出力:

Hello, Taro!

---