【2026年版】TypeScript チュートリアル：環境構築からモダンな型安全開発までをステップ形式で解説

mkdir ts-tutorial-2026
cd ts-tutorial-2026
npm init -y

npm install --save-dev typescript @types/node

npx tsc --init

// 型推論に任せる例
let message = "Hello, TypeScript 2026"; // messageはstring型と推論される
let count = 100; // countはnumber型と推論される

// 明示的に型を指定する例（複雑な初期化の場合など）
const isEnabled: boolean = true;
const tags: string[] = ["ts", "js", "modern"];

/**
 * ユーザーのフルネームを取得する関数
 * @param firstName - 姓
 * @param lastName - 名
 * @returns 結合されたフルネーム
 */
function getFullName(firstName: string, lastName: string): string {
  return `${firstName} ${lastName}`;
}

const userName = getFullName("Taro", "Tanaka");
console.log(userName);

// 以下はコンパイルエラーになります
// getFullName("Taro", 123); // 型 'number' の引数を型 'string' に割り当てることはできません

Taro Tanaka

type UserStatus = "active" | "inactive" | "pending";

type User = {
  readonly id: number; // 読み取り専用
  name: string;
  email: string;
  status: UserStatus;
  age?: number; // 任意項目
};

const newUser: User = {
  id: 1,
  name: "山田太郎",
  email: "yamada@example.com",
  status: "active"
};

// newUser.id = 2; // エラー：読み取り専用プロパティのため変更不可

type ApiResponse = 
  | { status: "success"; data: string; timestamp: number }
  | { status: "error"; message: string; code: number };

function handleResponse(response: ApiResponse) {
  if (response.status === "success") {
    // ここではresponseは自動的に成功時の型として扱われる
    console.log(`取得成功: ${response.data}`);
  } else {
    // ここではresponseはエラー時の型として扱われる
    console.error(`エラー発生: ${response.message} (Code: ${response.code})`);
  }
}

/**
 * 配列の最初の要素を返す汎用関数
 */
function getFirstElement<T>(array: T[]): T | undefined {
  return array.length > 0 ? array[0] : undefined;
}

const numbers = [1, 2, 3];
const firstNumber = getFirstElement(numbers); // Tはnumber型になる

const strings = ["A", "B", "C"];
const firstString = getFirstElement(strings); // Tはstring型になる

type Color = "red" | "green" | "blue";
type RGB = [number, number, number];

const palette = {
  primary: "red",
  secondary: [0, 255, 0],
  tertiary: "blue"
} satisfies Record<string, Color | RGB>;

// satisfiesを使うメリット：
// 1. palette.primary が "red" (string型) であることを記憶している
// 2. palette.secondary.map() などの配列メソッドがそのまま使える
palette.secondary.map(val => val.toFixed(0));

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

async function fetchPost(id: number): Promise<Post> {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  
  if (!response.ok) {
    throw new Error("データの取得に失敗しました");
  }

  // 実行時チェックを含めることが推奨されるが、まずは型キャストの例
  return await response.json() as Post;
}

// 実行例
fetchPost(1).then(post => {
  console.log(`Title: ${post.title}`);
});

Title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit

type Todo = {
  id: number;
  title: string;
  description: string;
  completed: boolean;
};

// 更新用：ID以外の項目は任意にする
type TodoUpdateInput = Omit<Partial<Todo>, "id">;

const updateData: TodoUpdateInput = {
  title: "TypeScriptをマスターする",
  // id: 1 // エラー：Omitによって除外されている
};

import { z } from "zod";

const UserSchema = z.object({
  username: z.string().min(3),
  email: z.string().email(),
});

// バリデーション実行
const result = UserSchema.safeParse({ username: "ts", email: "invalid-email" });
if (!result.success) {
  console.log(result.error.format());
}

type TaskStatus = "Todo" | "InProgress" | "Done";

interface Task {
  id: string;
  title: string;
  status: TaskStatus;
}

class TaskManager<T extends Task> {
  private tasks: T[] = [];

  addTask(task: T): void {
    this.tasks.push(task);
    console.log(`タスク追加: ${task.title}`);
  }

  getTasksByStatus(status: TaskStatus): T[] {
    return this.tasks.filter(t => t.status === status);
  }

  updateStatus(id: string, newStatus: TaskStatus): void {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.status = newStatus;
    }
  }
}

// 利用例
const manager = new TaskManager();
manager.addTask({ id: "1", title: "記事の執筆", status: "InProgress" });
manager.addTask({ id: "2", title: "コードレビュー", status: "Todo" });

const inProgressTasks = manager.getTasksByStatus("InProgress");
console.log(`進行中のタスク数: ${inProgressTasks.length}`);

タスク追加: 記事の執筆
タスク追加: コードレビュー
進行中のタスク数: 1