TypeScript の型

user.profile.name    // user が null なら、実行時に落ちる
res.json()           // 何が返ってくるか、書いた本人も分からない
'10' - 5             // 5（暗黙の型変換）

// JavaScript: 実行するまで気づかない
const user = await fetchUser(id);
console.log(user.nmae);       // undefined（typo）
console.log(user.age + 1);    // NaN（age が文字列だった）

// TypeScript: 書いた瞬間にエラーになる
console.log(user.nmae);
//               ~~~~ Property 'nmae' does not exist. Did you mean 'name'?

{ "compilerOptions": { "strict": true } }

const data: any = await response.json();
const name = data.user.profile.name;  // 何もチェックされない
name.toUpperCase();                   // 実行時に落ちる可能性

const data: unknown = await response.json();
 
// そのままでは使えない（コンパイルエラー）
data.user;  // Error: 'data' is of type 'unknown'
 
// 確認してから使う
if (typeof data === 'object' && data !== null && 'user' in data) {
  // ここでは安全
}

■ 正常なレスポンス
any     -> ALICE
unknown -> ALICE
 
■ サーバーの仕様変更で user が null になった
any     -> 実行時に落ちた: Cannot read properties of null (reading 'name')
unknown -> (想定外のレスポンス。既定値で続行)

// 危険: 型は書いてあるが、実行時には何も確認していない
const user: User = await response.json();

import { z } from 'zod';
 
const userSchema = z.object({
  id: z.string(),
  name: z.string(),
  age: z.number().int().positive(),
  email: z.string().email(),
});
 
type User = z.infer<typeof userSchema>;   // 型はスキーマから自動生成
 
const user = userSchema.parse(await response.json());
// ここを通過した時点で、user は確実に User の形をしている

■ 1 件目: {"id":"u1","name":"alice","age":24,"email":"alice@example.com"}
  OK alice (24歳)
■ 2 件目: {"id":"u2","name":"bob","age":-3,"email":"bob@example.com"}
  NG age: Number must be greater than 0
■ 3 件目: {"id":"u3","name":"carol","age":30,"email":"not-an-email"}
  NG email: Invalid email
■ 4 件目: {"id":999,"name":"dave","age":41}
  NG id: Expected string, received number
  NG email: Required

function getUser(id: string): User | undefined { ... }
 
const user = getUser('42');
console.log(user.name);
//          ~~~~ 'user' is possibly 'undefined'

// 1. 確認してから使う（推奨）
if (user === undefined) return;
console.log(user.name);
 
// 2. オプショナルチェーン（無ければ undefined になる）
console.log(user?.name);
 
// 3. デフォルト値（?? は null/undefined のときだけ右辺）
const name = user?.name ?? '名無し';

■ 入力: {"pageSize":0,"nickname":"","notify":false}
  pageSize  || 10 -> 10     ← 0 が消えた
  pageSize  ?? 10 -> 0
  nickname  || '名無し' -> "名無し"   ← 空文字が消えた
  nickname  ?? '名無し' -> ""
  notify    || true -> true          ← false が消えた
  notify    ?? true -> false

type Request = {
  isLoading: boolean;
  data?: User;
  error?: Error;
};

type Request =
  | { status: 'loading' }
  | { status: 'success'; data: User }
  | { status: 'error'; error: Error };

function render(request: Request): string {
  switch (request.status) {
    case 'loading':
      return '読み込み中';
    case 'success':
      return request.data.name;    // data があることが保証される
    case 'error':
      return request.error.message;
  }
}

function render(request: Request): string {
  switch (request.status) {
    case 'loading': return '読み込み中';
    case 'success': return request.data.name;
    case 'error': return request.error.message;
    default: {
      // ここに来る型が never でなければコンパイルエラーになる
      const exhaustive: never = request;
      throw new Error(`未対応の状態: ${JSON.stringify(exhaustive)}`);
    }
  }
}

loading  -> 読み込み中...
success  -> 成功: ユーザー3件
error    -> エラー: タイムアウト

type Order = {
  readonly id: string;
  readonly items: readonly Item[];
};
 
order.id = 'x';        // Error
order.items.push(...); // Error

// any を使うと戻り値の型が失われる
function firstAny(items: any[]): any { return items[0]; }
 
// ジェネリクスなら型が保たれる
function first<T>(items: readonly T[]): T | undefined {
  return items[0];
}
 
const name = first(['a', 'b']);   // string | undefined
const count = first([1, 2]);      // number | undefined

async function fetchUser(id: string): Promise<User> { ... }
 
const user = await fetchUser('42');   // User

// 直列: 合計 200ms
const user = await fetchUser(id);
const orders = await fetchOrders(id);
 
// 並列: 合計 100ms
const [user, orders] = await Promise.all([fetchUser(id), fetchOrders(id)]);

■ 待つ必要のないものを直列で待つと、その分だけ遅くなる
  直列 (for await): 901ms
  並列 (Promise.all): 301ms
 
■ 1件失敗したときの違い
  Promise.all          -> 全体が失敗する: ユーザー ng の取得に失敗
  allSettled fulfilled -> user:a
  allSettled rejected  -> Error: ユーザー ng の取得に失敗
  allSettled fulfilled -> user:c