TypeScript完全入門【2026年版】基礎から実践まで｜JavaScript開発者向け移行ガイド

TypeScriptはMicrosoftが開発したJavaScriptのスーパーセットで、型安全性により大規模開発の品質を向上させます。2026年現在、フロントエンド・バックエンド問わず多くの企業でTypeScriptが標準となっています。

TypeScriptとは？JavaScriptとの違い

TypeScriptは「型注釈」を追加することで、コードを書く段階でバグを発見できます。JavaScriptはブラウザで直接動きますが、TypeScriptはJavaScriptにコンパイルして使います。

// JavaScript（型のエラーを実行時まで検出できない）
function greet(name) {
  return "Hello, " + name.toUpperCase();
}
greet(42); // 実行時エラー

// TypeScript（コンパイル時にエラーを検出）
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}
greet(42); // コンパイルエラー

TypeScriptのインストールと設定

# TypeScriptをインストール
npm install --save-dev typescript @types/node

# tsconfig.json を生成
tsc --init

推奨 tsconfig.json 設定

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

TypeScriptの基本型システム

// 基本的な型
const name: string = "Taro";
const age: number = 25;
const isActive: boolean = true;

// 配列
const nums: number[] = [1, 2, 3];

// インターフェース
interface User {
  id: number;
  name: string;
  email: string;
  age?: number; // オプショナル
}

// Union型
type Status = "active" | "inactive" | "pending";

// ジェネリクス
function identity<T>(arg: T): T {
  return arg;
}

// ユーティリティ型
type PartialUser = Partial<User>;
type UserPreview = Pick<User, "id" | "name">;

APIレスポンスの型定義パターン

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

interface Post {
  id: number;
  title: string;
  content: string;
  publishedAt: Date | null;
}

async function fetchPosts(): Promise<ApiResponse<Post[]>> {
  const response = await fetch("/api/posts");
  if (!response.ok) {
    throw new Error("Fetch failed");
  }
  return response.json() as Promise<ApiResponse<Post[]>>;
}

React + TypeScript の基本パターン

import { FC, useState } from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  disabled?: boolean;
}

const Button: FC<ButtonProps> = ({ 
  label, 
  onClick, 
  variant = 'primary',
  disabled = false 
}) => {
  return (
    <button 
      className={variant}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
};

TypeScript学習リソース

• TypeScript公式ドキュメント：最も信頼できる情報源
• TypeScript Deep Dive（日本語版）：無料の包括的な学習リソース
• TypeScript Playground：ブラウザで即試せるオンラインエディタ

まとめ

TypeScriptは学習コストがかかりますが、バグの早期発見・IDEサポートの向上・チーム開発の効率化など、長期的なメリットは非常に大きいです。まずはstrict: trueで小さなプロジェクトに導入し、型の恩恵を体感してみてください。