Next.jsで「as any」を卒業せよ！型安全を劇的に高める5つの代替テクニック

const unsafeData: any = JSON.parse('{"id": 1, "username": "alice"}');
// コンパイルは通るが、実行時にクラッシュする危険性が高い
console.log(unsafeData.nonExistentMethod()); 

const safeData: unknown = JSON.parse('{"id": 1, "username": "alice"}');

// 直接プロパティにアクセスしようとすると、コンパイル時点で弾かれる
// console.log(safeData.username); // ❌ Compile Error!

// 必ず「型ガード」で型を絞り込んでから使用することをコンパイラが強制する
if (safeData !== null && typeof safeData === "object" && "username" in safeData) {
  // safeData.username に型安全にアクセス可能
  console.log((safeData as { username: string }).username); // OK
}

import { z } from "zod";

// 1. スキーマ（実行時検証用）を定義
const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string().email(),
  role: z.enum(["admin", "user"]),
});

// 2. スキーマからTypeScriptの静的型を自動抽出
export type User = z.infer<typeof UserSchema>;

export async function fetchUserById(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  const rawData = await response.json();

  // ❌ 危険: 型アサーションはAPIレスポンスの変更を検知できない
  // return rawData as User;

  // ✅ 安全: データ構造がスキーマと一致しない場合はその場で即座に例外をスローする
  return UserSchema.parse(rawData);
}

type CustomColor = "red" | "green" | "blue" | { r: number; g: number; b: number };

type Palette = Record<string, CustomColor>;

// ❌ as を使用した場合：元の正確なオブジェクト構造が失われる
const badPalette = {
  primary: { r: 255, g: 0, b: 0 },
  secondary: "blue",
} as Palette;

// コンパイラは primary が オブジェクトか文字列か特定できないため、エラーになる
// badPalette.primary.r; // ❌ Compile Error!

// ✅ satisfies を使用した場合：Palette型のルールを守りつつ、具体的なプロパティ情報を保護
const goodPalette = {
  primary: { r: 255, g: 0, b: 0 },
  secondary: "blue",
} satisfies Palette;

// primary がオブジェクトであることをコンパイラが完全に追跡できているため、型安全に補完される
console.log(goodPalette.primary.r); // ✅ OK!

interface CustomApiError {
  message: string;
  statusCode: number;
}

// ユーザー定義の型ガード関数
function isCustomApiError(error: unknown): error is CustomApiError {
  return (
    typeof error === "object" &&
    error !== null &&
    "message" in error &&
    "statusCode" in error &&
    typeof (error as Record<string, unknown>).message === "string" &&
    typeof (error as Record<string, unknown>).statusCode === "number"
  );
}

// 実装での活用
async function handleRequest() {
  try {
    await performAction();
  } catch (error: unknown) {
    if (isCustomApiError(error)) {
      // ブロック内では error は CustomApiError として型安全に推論される
      console.error(`Error ${error.statusCode}: ${error.message}`);
    } else {
      console.error("An unknown error occurred", error);
    }
  }
}

// ❌ any を使用した場合：データアクセス時に型情報がすべて消滅する
interface UnsafeResponse {
  data: any;
  status: number;
}

// ✅ ジェネリクスを使用した場合：任意のデータ構造 T を引数として受け取る
interface ApiResponse<T> {
  data: T;
  status: number;
  timestamp: string;
}

interface Product {
  id: string;
  price: number;
  title: string;
}

// 呼び出し時に具体的な型 Product を代入
function handleProductResponse(res: ApiResponse<Product>) {
  // res.data.title は自動的に string として補完され、タイポも防止される
  console.log(res.data.title.toUpperCase());
}