前端工程化：基于 TypeScript 与 CI 的全链路类型安全守门实践

{
  "compilerOptions": {
    "strict": true,
    // 强制检查解构或索引访问，避免 arr[0] 默认被推导为 T 而不是 T | undefined
    "noUncheckedIndexedAccess": true,
    // 强制 switch case 必须有 break 或 return
    "noFallthroughCasesInSwitch": true,
    // 不允许隐式的 any
    "noImplicitAny": true
  }
}

import { z } from 'zod';

// 1. 定义数据契约
const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1),
  role: z.enum(['admin', 'user', 'guest']),
  avatar: z.string().url().optional(),
});

// 2. 自动反向推导 TS 类型（不用手写两遍！）
type User = z.infer<typeof UserSchema>;

// 3. 在网络请求层做安全拦截
async function fetchUserProfile(userId: string): Promise<User> {
  const response = await fetch(`/api/user/${userId}`);
  const rawData = await response.json();

  // safeParse 不会直接 throw，方便自定义错误处理
  const result = UserSchema.safeParse(rawData);

  if (!result.success) {
    console.error('🚨 接口契约被破坏:', result.error.format());
    throw new Error('API Schema Validation Failed');
  }

  // 这里的 result.data 拥有 100% 准确的 TS 类型！
  return result.data;
}

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

{
  "lint-staged": {
    "*.{ts,tsx}": [
      "tsc-files --noEmit",
      "eslint --fix"
    ]
  }
}

name: Type Check CI

on:
  pull_request:
    branches: [main, master]

jobs:
  type-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - run: pnpm install --frozen-lockfile
      # 纯检查类型，绝不产出文件，速度拉满
      - run: pnpm exec tsc --noEmit