TypeScriptエッセンシャルガイド

type Theme = 'light' | 'dark';
type Status = 'idle' | 'loading' | 'success' | 'error';

const theme: Theme = 'light'; // OK
const status: Status = 'pending'; // エラー

interface Response<T> {
  data: T;
  status: number;
}

// 使用例
interface User {
  id: number;
  name: string;
}

const response: Response<User> = {
  data: { id: 1, name: "山田太郎" },
  status: 200
};

interface Bird {
  type: 'bird';
  flyingSpeed: number;
}

interface Horse {
  type: 'horse';
  runningSpeed: number;
}

type Animal = Bird | Horse;

function isBird(animal: Animal): animal is Bird {
  return animal.type === 'bird';
}

function getSpeed(animal: Animal) {
  if (isBird(animal)) {
    return animal.flyingSpeed; // Bird型として認識される
  }
  return animal.runningSpeed; // Horse型として認識される
}

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface Todo {
  title: string;
  description: string;
}

const todo: Readonly<Todo> = {
  title: "TypeScriptの学習",
  description: "Mapped Typesについて学ぶ"
};

todo.title = "変更"; // エラー：読み取り専用プロパティ

async function fetchUser<T>(id: number): Promise<T> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error('User not found');
  }
  return response.json();
}

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

// 使用例
const user = await fetchUser<User>(1);
console.log(user.name); // 型安全

interface Post {
  id: number;
  title: string;
  content: string;
  published: boolean;
}

// 部分的な型
type PostPreview = Pick<Post, 'id' | 'title'>;

// オプショナルな型
type PartialPost = Partial<Post>;

// 読み取り専用の型
type ReadonlyPost = Readonly<Post>;

// プロパティを除外した型
type PostWithoutContent = Omit<Post, 'content'>;

type Result<T, E = Error> = 
  | { success: true; data: T }
  | { success: false; error: E };

async function fetchData(): Promise<Result<string[]>> {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return { 
      success: false, 
      error: error instanceof Error ? error : new Error('Unknown error')
    };
  }
}

// 使用例
const result = await fetchData();
if (result.success) {
  console.log(result.data); // string[]型として認識
} else {
  console.error(result.error); // Error型として認識
}

type IsArray<T> = T extends any[] ? true : false;
type IsString<T> = T extends string ? true : false;

// 使用例
type CheckArray = IsArray<string[]>; // true
type CheckString = IsString<"hello">; // true

interface APIResponse {
  user: {
    id: number;
    name: string;
  };
  settings: {
    theme: string;
    notifications: boolean;
  };
}

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const api: APIResponse = {
  user: { id: 1, name: "ユーザー" },
  settings: { theme: "dark", notifications: true }
};

const user = get(api, "user"); // 型推論が効く