TypeScript（TS）はJavaScriptに型システムを追加したAltJS言語で、Microsoftが開発しています。近年のフロントエンド・バックエンド開発では事実上の標準になりつつあります。本記事ではJavaScript経験者向けにTypeScriptの基本を解説します。

TypeScriptを使う理由

メリット	説明
バグの早期発見	コンパイル時にエラーが出るため実行前に問題がわかる
コード補完の精度向上	エディタが型情報をもとに補完してくれる
リファクタリングの安全性	型があることで影響範囲が明確になる
チーム開発での可読性	関数の引数・戻り値が明示されて意図が伝わりやすい

セットアップ

npm install -D typescript
npx tsc --init  # tsconfig.jsonを生成

ファイル拡張子を .ts にしてTypeScriptを書き始めるだけです。

基本的な型定義

プリミティブ型

const name: string = 'Alice';
const age: number = 30;
const isActive: boolean = true;
const nothing: null = null;
const undef: undefined = undefined;

JavaScriptと同じ値を扱いますが、型を明示できます。型推論があるため、代入値から型が明らかな場合は省略可能です。

const name = 'Alice'; // TypeScriptが string と推論してくれる

配列・タプル

const numbers: number[] = [1, 2, 3];
const names: Array<string> = ['Alice', 'Bob'];

// タプル（各要素の型を指定）
const pair: [string, number] = ['Alice', 30];

オブジェクト型

const user: { name: string; age: number } = {
  name: 'Alice',
  age: 30,
};

interface と type

オブジェクトの形を定義する方法が2つあります。

interface

interface User {
  id: number;
  name: string;
  email?: string; // ?はオプショナル（省略可）
}

const user: User = {
  id: 1,
  name: 'Alice',
};

type

type Point = {
  x: number;
  y: number;
};

type Status = 'active' | 'inactive' | 'pending'; // ユニオン型

使い分けの目安: オブジェクトの構造定義はどちらでも可。拡張（extends）を多用するならinterface、ユニオン型や複雑な型合成はtypeが便利。

関数の型定義

// 引数と戻り値に型をつける
function add(a: number, b: number): number {
  return a + b;
}

// アロー関数
const multiply = (a: number, b: number): number => a * b;

// オプショナル引数
function greet(name: string, prefix?: string): string {
  return `${prefix ?? 'Hello'}, ${name}!`;
}

関数型（コールバック等で使う）

type Callback = (value: string) => void;

function process(data: string, callback: Callback): void {
  callback(data.toUpperCase());
}

Generics（ジェネリクス）

型をパラメーターとして受け取る仕組み。再利用性の高いコードを書くために重要です。

// 配列の最初の要素を返す汎用関数
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = first([1, 2, 3]); // type: number
const str = first(['a', 'b']); // type: string

APIレスポンスの型定義例

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

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

type UserResponse = ApiResponse<User>;
// → { data: User; status: number; message: string }

tsconfig.json の主要設定

{
  "compilerOptions": {
    "target": "ES2022", // コンパイル後のJSバージョン
    "module": "ESNext", // モジュール形式
    "strict": true, // 厳格な型チェック（推奨）
    "noImplicitAny": true, // any型の暗黙的使用を禁止
    "outDir": "./dist", // コンパイル後の出力先
    "rootDir": "./src", // ソースファイルのルート
    "moduleResolution": "bundler" // バンドラー（Vite等）向け
  }
}

"strict": true を有効にすることを強く推奨します。厳格な型チェックでバグを未然に防げます。

実践的な型パターン

Partial と Required

interface User {
  id: number;
  name: string;
  email: string;
}

// 全フィールドをオプショナルに
type PartialUser = Partial<User>;
// → { id?: number; name?: string; email?: string }

// 全フィールドを必須に
type RequiredUser = Required<PartialUser>;

Pick と Omit

type UserPreview = Pick<User, 'id' | 'name'>;
// → { id: number; name: string }

type UserWithoutEmail = Omit<User, 'email'>;
// → { id: number; name: string }

JavaScript → TypeScript 移行のコツ

1. allowJs: true で既存のJSファイルと共存させながら段階的に移行
2. まず型定義が難しい箇所は unknown や型アサーション（as）で暫定処理
3. strict: false から始めて徐々に厳格化する

まとめ

• TypeScriptはJavaScriptの上位互換。既存JSはそのまま動く
• interface と type でオブジェクトの形を定義する
• strict: true で厳格な型チェックを有効にするのが推奨
• Genericsで型安全な再利用可能なコードを書ける
• VSCode（またはCursor）との組み合わせで補完が強力になる

TypeScriptへの投資は、コード品質とチーム開発の効率向上として確実に回収できます。新規プロジェクトはTypeScriptで始めることを推奨します。

関連記事

• GitHub Actions CI/CD入門2026 — 自動テスト・デプロイをゼロから構築 — 詳細はこちら
• Claude API vs OpenAI API 比較2026 — 副業エンジニアはどちらを使うべき？ — 詳細はこちら
• Cursor vs GitHub Copilot 2026年徹底比較 — エンジニアが選ぶべきはどちら？ — 詳細はこちら