【2026年版】TypeScript完全入門｜JavaScript との違い・型定義・Reactとの組み合わせまで実践解説

TypeScriptはMicrosoftが開発したJavaScriptに型システムを追加したプログラミング言語です。2026年現在、大規模なWebアプリ開発では事実上の標準となっており、フロントエンド・バックエンド問わず採用が進んでいます。TypeScriptエンジニアの平均年収は600〜1,100万円と高水準です。

JavaScriptとTypeScriptの違い

TypeScriptの基本型定義

// 基本型
const name: string = "Tech Athletes";
const age: number = 25;
const isActive: boolean = true;
const nothing: null = null;
const undef: undefined = undefined;

// 配列
const numbers: number[] = [1, 2, 3];
const strings: Array<string> = ["a", "b", "c"];

// タプル
const tuple: [string, number, boolean] = ["Alice", 30, true];

// オブジェクト型（インターフェース）
interface Engineer {
  id: number;
  name: string;
  skills: string[];
  salary?: number; // オプショナル
  readonly createdAt: Date; // 読み取り専用
}

// 型エイリアス
type Skill = "Python" | "TypeScript" | "Go" | "Rust";

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

const result1 = identity<string>("hello"); // string型
const result2 = identity<number>(42);      // number型

// ユーティリティ型
type PartialEngineer = Partial<Engineer>;  // 全プロパティをオプショナルに
type RequiredEngineer = Required<Engineer>; // 全プロパティを必須に
type ReadonlyEngineer = Readonly<Engineer>; // 全プロパティを読み取り専用に
type NameOnly = Pick<Engineer, "name" | "skills">; // 特定プロパティのみ抽出

React + TypeScriptの実践例

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

// Props型定義
interface EngineerCardProps {
  name: string;
  skill: string;
  salary: number;
  onSelect: (name: string) => void;
}

// コンポーネント定義
const EngineerCard: React.FC<EngineerCardProps> = ({
  name,
  skill,
  salary,
  onSelect,
}) => {
  return (
    <div className="engineer-card" onClick={() => onSelect(name)}>
      <h3>{name}</h3>
      <p>スキル: {skill}</p>
      <p>年収: {salary.toLocaleString()}万円</p>
    </div>
  );
};

// カスタムフック（型付き）
interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

function useFetch<T>(url: string): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data: T) => setState({ data, loading: false, error: null }))
      .catch((err) =>
        setState({ data: null, loading: false, error: err.message })
      );
  }, [url]);

  return state;
}

// メインコンポーネント
const EngineerList: React.FC = () => {
  const { data, loading, error } = useFetch<Engineer[]>("/api/engineers");
  const [selected, setSelected] = useState<string | null>(null);

  const handleSelect = useCallback((name: string) => {
    setSelected(name);
  }, []);

  if (loading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;

  return (
    <div>
      {selected && <p>選択中: {selected}</p>}
      {data?.map((eng) => (
        <EngineerCard key={eng.id} {...eng} onSelect={handleSelect} />
      ))}
    </div>
  );
};

tsconfig.jsonの推奨設定

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

まとめ：TypeScript習得のロードマップ

TypeScriptは現代のフロントエンド開発において必須のスキルです。まずJavaScriptの基礎を固め、型システムを段階的に学習することが重要です。React + TypeScript + Next.jsのスタックをマスターすれば、高年収フロントエンドエンジニアへの道が開けます。