【2026年最新】TypeScript完全入門ガイド｜基本型からジェネリクス・React・Node.js実践まで

TypeScriptはJavaScriptに静的型付けを追加した言語です。2026年現在、React/Next.js、Node.js、Denoなど主要なフレームワークすべてでTypeScriptが標準となっています。本記事では初心者向けに基礎から実践まで解説します。

なぜTypeScriptを学ぶべきか？

• バグの早期発見：コンパイル時に型エラーを検出
• 開発効率UP：IDEの強力なオートコンプリート
• チーム開発：コードの意図が明確になり可読性向上
• 求人市場：TypeScript必須の求人が急増中

TypeScriptの基本的な型

// 基本型
let name: string = "田中太郎";
let age: number = 30;
let isActive: boolean = true;
let nothing: null = null;
let undef: undefined = undefined;

// 配列
let numbers: number[] = [1, 2, 3];
let names: Array = ["Alice", "Bob"];

// タプル（固定長の配列）
let tuple: [string, number] = ["hello", 10];

// Union型（複数の型を許容）
let id: string | number = "abc123";
id = 42;  // OK

// リテラル型
let direction: "left" | "right" | "up" | "down" = "left";

// any（使用は最小限に）
let anything: any = "なんでもOK";

インターフェースと型エイリアス

// インターフェース
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;  // オプショナル
  readonly createdAt: Date;  // 読み取り専用
}

// 型エイリアス
type Point = {
  x: number;
  y: number;
};

// インターフェースの拡張
interface AdminUser extends User {
  role: "admin" | "super-admin";
  permissions: string[];
}

// 使用例
const user: User = {
  id: 1,
  name: "山田花子",
  email: "hanako@example.com",
  createdAt: new Date()
};

ジェネリクス：再利用可能な型安全なコード

// ジェネリック関数
function identity(arg: T): T {
  return arg;
}

const str = identity("hello");  // 型推論：string
const num = identity(42);       // 型推論：number

// ジェネリッククラス
class Stack {
  private items: T[] = [];
  
  push(item: T): void {
    this.items.push(item);
  }
  
  pop(): T | undefined {
    return this.items.pop();
  }
  
  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }
}

const numberStack = new Stack();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop());  // 2

Utility Types：TypeScriptの組み込み型ユーティリティ

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

// Partial：全プロパティをオプショナルに
type UserUpdate = Partial;

// Required：全プロパティを必須に
type RequiredUser = Required;

// Readonly：全プロパティを読み取り専用に
type ImmutableUser = Readonly;

// Pick：特定のプロパティのみ選択
type UserProfile = Pick;

// Omit：特定のプロパティを除外
type PublicUser = Omit;

// Record：キーと値の型を指定したオブジェクト
type UserMap = Record;

// 実用例
async function updateUser(id: number, data: Partial): Promise {
  // idとpassword以外のプロパティのみ更新可能
}

TypeScript + React：コンポーネントの型定義

import React, { useState, useCallback } from "react";

// Propsの型定義
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary" | "danger";
  disabled?: boolean;
  children?: React.ReactNode;
}

// 関数コンポーネント
const Button: React.FC = ({
  label,
  onClick,
  variant = "primary",
  disabled = false,
  children
}) => {
  return (
    
  );
};

// カスタムフック
function useCounter(initialValue: number = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);
  const reset = useCallback(() => setCount(initialValue), [initialValue]);
  
  return { count, increment, decrement, reset };
}

TypeScript + Node.js：バックエンド開発

import express, { Request, Response, NextFunction } from "express";

const app = express();

interface CreateUserRequest {
  name: string;
  email: string;
  password: string;
}

interface ApiResponse {
  success: boolean;
  data?: T;
  error?: string;
}

app.post("/api/users", async (
  req: Request,
  res: Response>
) => {
  try {
    const { name, email, password } = req.body;
    // バリデーション・DB保存処理
    const newUser = { id: 1, name, email };
    return res.status(201).json({ success: true, data: newUser });
  } catch (error) {
    return res.status(500).json({ success: false, error: "Internal server error" });
  }
});

tsconfig.json：推奨設定

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "lib": ["ES2022", "DOM"],
    "strict": true,          // 厳格モード（推奨）
    "noImplicitAny": true,   // anyの暗黙的使用を禁止
    "strictNullChecks": true, // null/undefinedチェック
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,     // 型定義ファイル生成
    "sourceMap": true,       // デバッグ用
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]       // エイリアス設定
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

まとめ

TypeScriptは現代のJavaScript開発において事実上の標準言語です。型安全なコードを書くことで、バグを減らし、開発速度を向上させることができます。

まずは既存のJavaScriptプロジェクトにTypeScriptを段階的に導入することをお勧めします。allowJs: trueオプションを使えば、JavaScriptファイルとTypeScriptファイルを混在させながら移行できます。