16 - TypeScript 高级实践¶

// ❌ TS4: 需要 as const 才能保留字面量类型
function getRoutes<T extends readonly string[]>(routes: T): T {
  return routes;
}
const routes = getRoutes(["home", "about", "contact"] as const);
// type: readonly ["home", "about", "contact"]

// ✅ TS5: const 类型参数自动推断为字面量类型
function getRoutes5<const T extends readonly string[]>(routes: T): T {
  return routes;
}
const routes5 = getRoutes5(["home", "about", "contact"]);
// type: readonly ["home", "about", "contact"] — 无需 as const

// 实际应用：类型安全的配置构建器
function defineConfig<const T extends {
  routes: Record<string, { path: string; auth?: boolean }>;
  plugins: readonly string[];
}>(config: T): T {
  return config;
}

const appConfig = defineConfig({
  routes: {
    home: { path: "/", auth: false },
    dashboard: { path: "/dashboard", auth: true },
  },
  plugins: ["analytics", "sentry"],
});
// appConfig.routes.home.path 的类型是 "/" 而不是 string
// appConfig.plugins 的类型是 readonly ["analytics", "sentry"]

// === 类装饰器（TC39 Stage 3 标准签名）===
function sealed(target: Function, context: ClassDecoratorContext) {
  Object.seal(target);
  Object.seal(target.prototype);
}

// === 方法装饰器 ===
function log(
  target: any,
  context: ClassMethodDecoratorContext
) {
  const methodName = String(context.name);
  return function (this: any, ...args: any[]) {
    console.log(`[LOG] ${methodName} called with:`, args);
    const result = target.apply(this, args);
    console.log(`[LOG] ${methodName} returned:`, result);
    return result;
  };
}

// === 自动绑定装饰器 ===
function bound(
  target: any,
  context: ClassMethodDecoratorContext
) {
  const methodName = context.name;
  context.addInitializer(function (this: any) {
    this[methodName] = this[methodName].bind(this);
  });
}

// === 自动访问器装饰器 ===
// 注意：accessor 字段使用 ClassAccessorDecoratorContext（非 ClassFieldDecoratorContext）
function range(min: number, max: number) {
  return function <T extends number>(
    target: ClassAccessorDecoratorTarget<any, T>,
    context: ClassAccessorDecoratorContext<any, T>
  ): ClassAccessorDecoratorResult<any, T> {
    return {
      // init 在初始化时验证
      init(value: T): T {
        if (value < min || value > max) {
          throw new RangeError(
            `${String(context.name)} must be between ${min} and ${max}`
          );
        }
        return value;
      },
      // set 在赋值时验证
      set(value: T) {
        if (value < min || value > max) {
          throw new RangeError(
            `${String(context.name)} must be between ${min} and ${max}`
          );
        }
        return value;
      },
    };
  };
}

// === 使用示例 ===
@sealed
class UserService {
  @range(0, 150)
  accessor age: number = 25;

  @log
  @bound
  getUser(id: string) {
    return { id, name: "Alice", age: this.age };
  }
}

const service = new UserService();
const getUser = service.getUser; // 已自动绑定
getUser("123"); // [LOG] getUser called with: ["123"]

type ColorMap = Record<string, [number, number, number] | string>;

// ❌ 使用类型注解：丢失字面量类型信息
const colors1: ColorMap = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
};
// colors1.green 的类型是 string | [number, number, number] — 不精确

// ✅ 使用 satisfies：保留精确类型
const colors2 = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
} satisfies ColorMap;
// colors2.green 的类型是 string — 精确！
// colors2.red 的类型是 [number, number, number] — 精确！

colors2.green.toUpperCase(); // ✅ 类型安全
colors2.red.map(v => v / 255); // ✅ 类型安全

// 实际应用：路由配置
type Route = { path: string; component: () => JSX.Element; layout?: string };
type AppRoutes = Record<string, Route>;

const routes = {
  home: { path: "/", component: HomePage },
  about: { path: "/about", component: AboutPage, layout: "main" },
  dashboard: { path: "/dashboard", component: DashboardPage, layout: "admin" },
} satisfies AppRoutes;

// routes.dashboard.layout 的类型是 string（而非 string | undefined）

// === 1. 枚举增强：所有枚举都可以是联合枚举 ===
enum LogLevel {
  Debug = "debug",
  Info = "info",
  Warn = "warn",
  Error = "error",
}
// TS5 中枚举成员都是类型
function handleLog(level: LogLevel.Error | LogLevel.Warn) { /* ... */ }

// === 2. switch(true) 的类型收窄 ===
function processValue(value: string | number | boolean) {
  switch (true) {
    case typeof value === "string":
      return value.toUpperCase(); // TS5 正确收窄为 string
    case typeof value === "number":
      return value.toFixed(2);    // 正确收窄为 number
    case typeof value === "boolean":
      return value ? "yes" : "no"; // 正确收窄为 boolean
  }
}

// === 3. 模块解析 bundler 模式 ===
// tsconfig.json
// { "compilerOptions": { "moduleResolution": "bundler" } }
// 专为现代打包器设计，支持 package.json exports 字段

// === 基本语法 ===
// T extends U ? X : Y

// 基础示例
type IsString<T> = T extends string ? true : false;
type A = IsString<"hello">; // true
type B = IsString<42>;       // false

// === infer 关键字：类型推断 ===
// 提取函数返回值类型
// infer R在条件类型中声明“占位类型变量”：若T匹配函数签名则R自动推断为返回值类型，否则返回never
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type Fn = (x: number) => string;
type R = MyReturnType<Fn>; // string

// 提取函数参数类型
type MyParameters<T> = T extends (...args: infer P) => any ? P : never;
type Params = MyParameters<(a: string, b: number) => void>; // [string, number]

// 提取 Promise 内部类型
type UnwrapPromise<T> = T extends Promise<infer U> ? UnwrapPromise<U> : T;
type P1 = UnwrapPromise<Promise<Promise<string>>>; // string

// 提取数组元素类型
type ElementOf<T> = T extends (infer E)[] ? E : never;
type El = ElementOf<string[]>; // string

// === 高级 infer 用法 ===
// 提取字符串中的模式
type ExtractRouteParams<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof ExtractRouteParams<Rest>]: string }
    : T extends `${string}:${infer Param}`
    ? { [K in Param]: string }
    : {};

type RouteParams = ExtractRouteParams<"/users/:userId/posts/:postId">;
// { userId: string; postId: string }

// === 分布式条件类型 ===
// 当 T 是联合类型时，条件类型会分配到每个成员
type ToArray<T> = T extends any ? T[] : never;
type Distributed = ToArray<string | number>; // string[] | number[]

// 阻止分布式行为
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
type NonDist = ToArrayNonDist<string | number>; // (string | number)[]

// === 基本用法 ===
type EventName = `on${Capitalize<"click" | "focus" | "blur">}`;
// "onClick" | "onFocus" | "onBlur"

// 内置字符串操作类型
type Upper = Uppercase<"hello">;     // "HELLO"
type Lower = Lowercase<"HELLO">;     // "hello"
type Cap = Capitalize<"hello">;      // "Hello"
type Uncap = Uncapitalize<"Hello">;  // "hello"

// === CSS 属性类型 ===
type CSSValue = `${number}${"px" | "em" | "rem" | "vh" | "vw" | "%"}`;
const width: CSSValue = "100px";  // ✅
const height: CSSValue = "50vh";  // ✅
// const bad: CSSValue = "auto";  // ❌ 编译错误

// === 类型安全的事件系统 ===
type EventMap = {
  click: { x: number; y: number };
  focus: { target: HTMLElement };
  keydown: { key: string; code: string };
};

type EventHandler<T extends keyof EventMap> = (event: EventMap[T]) => void;

// 构建严格的事件监听器类型
type StrictEventListener = {
  [K in keyof EventMap as `on${Capitalize<K & string>}`]: EventHandler<K>;
};
// {
//   onClick: (event: { x: number; y: number }) => void;
//   onFocus: (event: { target: HTMLElement }) => void;
//   onKeydown: (event: { key: string; code: string }) => void;
// }

// === 类型安全的 API 路由 ===
type APIRoute = `/api/${"v1" | "v2"}/${"users" | "posts" | "comments"}`;
// "/api/v1/users" | "/api/v1/posts" | ... 共6种组合

// 解析路径参数
type ParsePath<T extends string> =
  T extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | ParsePath<`/${Rest}`>
    : T extends `${infer _Start}:${infer Param}`
    ? Param
    : never;

type Params = ParsePath<"/api/users/:userId/posts/:postId">;
// "userId" | "postId"

// === 基本映射类型 ===
type Optional<T> = { [K in keyof T]?: T[K] };
type Readonly2<T> = { readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };

// === 键重映射（Key Remapping） ===
// 添加前缀
type Prefixed<T, P extends string> = {
  [K in keyof T as `${P}${Capitalize<K & string>}`]: T[K];
};

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

type GetterUser = Prefixed<User, "get">;
// { getName: string; getAge: number; getEmail: string }

// === Getter/Setter 生成 ===
type Getters<T> = {
  [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K];
};
type Setters<T> = {
  [K in keyof T as `set${Capitalize<K & string>}`]: (value: T[K]) => void;
};
type WithAccessors<T> = T & Getters<T> & Setters<T>;

// === 过滤键 ===
// 只保留值为函数的属性
type MethodsOf<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

class MyClass {
  name = "test";
  age = 25;
  greet() { return "hello"; }
  calculate(x: number) { return x * 2; }
}

type Methods = MethodsOf<MyClass>;
// { greet: () => string; calculate: (x: number) => number }

// === 移除特定类型的键 ===
type OmitByType<T, U> = {
  [K in keyof T as T[K] extends U ? never : K]: T[K];
};

type WithoutStrings = OmitByType<User, string>;
// { age: number }

// === JSON 类型 ===
type JSONValue =
  | string
  | number
  | boolean
  | null
  | JSONValue[]
  | { [key: string]: JSONValue };

// === 深度嵌套的树形结构 ===
type TreeNode<T> = {
  value: T;
  children: TreeNode<T>[];
};

const fileTree: TreeNode<string> = {
  value: "src",
  children: [
    { value: "index.ts", children: [] },
    {
      value: "utils",
      children: [
        { value: "helpers.ts", children: [] },
      ],
    },
  ],
};

// === 递归展平元组 ===
// 递归展平：infer First/Rest解构首元素和剩余，若First是数组则递归展平后拼接，否则保留First并递归处理Rest
type Flatten<T extends any[]> =
  T extends [infer First, ...infer Rest]
    ? First extends any[]
      ? [...Flatten<First>, ...Flatten<Rest>]
      : [First, ...Flatten<Rest>]
    : [];

type Flat = Flatten<[1, [2, 3], [4, [5, 6]]]>;
// [1, 2, 3, 4, 5, 6]

// === 递归类型实用工具 ===
// 将嵌套对象的所有键路径提取为联合类型（见下节 PathOf）

// === 1. DeepReadonly ===
type DeepReadonly<T> = T extends Function
  ? T
  : T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;

interface Config {
  db: { host: string; port: number; options: { ssl: boolean } };
  cache: { ttl: number };
}
type ReadonlyConfig = DeepReadonly<Config>;
// 所有嵌套属性都变为 readonly

// === 2. DeepPartial ===
type DeepPartial<T> = T extends Function
  ? T
  : T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

// 允许部分更新深度嵌套的配置
function updateConfig(patch: DeepPartial<Config>) { /* ... */ }
updateConfig({ db: { options: { ssl: true } } }); // ✅ 只更新 ssl

// === 3. PathOf — 提取对象所有嵌套路径 ===
type PathOf<T, Prefix extends string = ""> = T extends object
  ? {
      [K in keyof T & string]:
        | `${Prefix}${K}`
        | PathOf<T[K], `${Prefix}${K}.`>;
    }[keyof T & string]
  : never;

type ConfigPaths = PathOf<Config>;
// "db" | "db.host" | "db.port" | "db.options" | "db.options.ssl" | "cache" | "cache.ttl"

// 类型安全的 get 函数
function get<T, P extends PathOf<T>>(obj: T, path: P): unknown {
  return path.split(".").reduce((acc: any, key) => acc?.[key], obj);
}

// === 4. DeepRequired ===
type DeepRequired<T> = T extends Function
  ? T
  : T extends object
  ? { [K in keyof T]-?: DeepRequired<T[K]> }
  : T;

// === 5. TupleToUnion ===
type TupleToUnion<T extends readonly any[]> = T[number];
type U = TupleToUnion<[string, number, boolean]>; // string | number | boolean

// === 6. UnionToIntersection ===
type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

type Inter = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

// === 7. PickByValue ===
type PickByValue<T, V> = {
  [K in keyof T as T[K] extends V ? K : never]: T[K];
};

interface Mixed {
  name: string;
  age: number;
  active: boolean;
  email: string;
}
type StringProps = PickByValue<Mixed, string>;
// { name: string; email: string }

// === 8. MutableKeys / ReadonlyKeys ===
type MutableKeys<T> = {
  [K in keyof T]-?: IfEquals<
    { [Q in K]: T[K] },
    { -readonly [Q in K]: T[K] },
    K
  >;
}[keyof T];

type IfEquals<X, Y, A = X, B = never> =
  (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
    ? A
    : B;

import { z } from "zod";

// === 定义 Schema ===
const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(2).max(50),
  email: z.string().email(),
  age: z.number().int().min(0).max(150).optional(),
  role: z.enum(["admin", "user", "moderator"]),
  preferences: z.object({
    theme: z.enum(["light", "dark"]).default("light"),
    notifications: z.boolean().default(true),
    language: z.string().default("zh-CN"),
  }).optional(),
  tags: z.array(z.string()).max(10).default([]),
  createdAt: z.coerce.date(),
});

// 自动推导类型 — 无需手写 interface
type User = z.infer<typeof UserSchema>;
// {
//   id: string;
//   name: string;
//   email: string;
//   age?: number;
//   role: "admin" | "user" | "moderator";
//   preferences?: { theme: "light" | "dark"; notifications: boolean; language: string };
//   tags: string[];
//   createdAt: Date;
// }

// === 运行时验证 ===
function createUser(input: unknown): User {
  const result = UserSchema.safeParse(input);
  if (!result.success) {
    // result.error 包含详细的验证错误信息
    const formatted = result.error.format();
    throw new Error(`Validation failed: ${JSON.stringify(formatted)}`);
  }
  return result.data; // 类型安全的 User
}

// === Schema 组合与变换 ===
const CreateUserInput = UserSchema.omit({ id: true, createdAt: true });
const UpdateUserInput = UserSchema.partial().omit({ id: true });
const UserResponse = UserSchema.extend({
  postCount: z.number(),
  lastLogin: z.date().nullable(),
});

type CreateUserInput = z.infer<typeof CreateUserInput>;
type UpdateUserInput = z.infer<typeof UpdateUserInput>;

// === 自定义验证 ===
const PasswordSchema = z
  .string()
  .min(8, "密码至少8个字符")
  .regex(/[A-Z]/, "需要至少一个大写字母")
  .regex(/[0-9]/, "需要至少一个数字")
  .regex(/[^A-Za-z0-9]/, "需要至少一个特殊字符");

const RegisterSchema = z
  .object({
    email: z.string().email(),
    password: PasswordSchema,
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "两次密码不一致",
    path: ["confirmPassword"],
  });

// === 后端：定义 Router ===
// server/trpc.ts
import { initTRPC, TRPCError } from "@trpc/server";
import { z } from "zod";

const t = initTRPC.context<{ userId?: string }>().create();

const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({ ctx: { userId: ctx.userId } });
});

const publicProcedure = t.procedure;
const protectedProcedure = t.procedure.use(isAuthed);

// server/routers/user.ts
export const userRouter = t.router({
  getById: publicProcedure
    .input(z.object({ id: z.string().uuid() }))
    .query(async ({ input }) => {
      const user = await db.user.findUnique({ where: { id: input.id } });
      if (!user) throw new TRPCError({ code: "NOT_FOUND" });
      return user;
    }),

  list: publicProcedure
    .input(z.object({
      page: z.number().int().min(1).default(1),
      pageSize: z.number().int().min(1).max(100).default(20),
      role: z.enum(["admin", "user"]).optional(),
    }))
    .query(async ({ input }) => {
      return db.user.findMany({
        skip: (input.page - 1) * input.pageSize,
        take: input.pageSize,
        where: input.role ? { role: input.role } : undefined,
      });
    }),

  update: protectedProcedure
    .input(z.object({
      name: z.string().min(2).optional(),
      email: z.string().email().optional(),
    }))
    .mutation(async ({ input, ctx }) => {
      return db.user.update({
        where: { id: ctx.userId },
        data: input,
      });
    }),
});

export type AppRouter = typeof appRouter;

// === 前端：完全类型安全的调用 ===
// client/trpc.ts
import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../server/routers";

export const trpc = createTRPCReact<AppRouter>();

// React 组件中使用
function UserProfile({ userId }: { userId: string }) {
  // ✅ input 类型自动推断：{ id: string }
  // ✅ data 类型自动推断为 User
  const { data: user, isLoading, error } = trpc.user.getById.useQuery({ id: userId });

  // ✅ mutate 的参数类型自动推断
  const updateMutation = trpc.user.update.useMutation({
    onSuccess: () => { /* 更新成功 */ },
  });

  if (isLoading) return <Loading />;
  if (error) return <Error message={error.message} />;

  return (
    <div>
      <h1>{user.name}</h1>  {/* ✅ user.name 类型安全 */}
      <button onClick={() => updateMutation.mutate({ name: "New Name" })}>
        更新
      </button>
    </div>
  );
}

import React, { ReactNode, ComponentPropsWithoutRef, ComponentPropsWithRef } from "react";

// === 基础 Props 设计 ===
// 1. 使用 interface + 明确的可选属性
interface ButtonProps {
  variant: "primary" | "secondary" | "danger";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  loading?: boolean;
  children: ReactNode;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

// 2. 扩展原生 HTML 属性
interface InputProps extends ComponentPropsWithoutRef<"input"> {
  label: string;
  error?: string;
  helperText?: string;
}

// 3. 多态组件（as prop）
type PolymorphicProps<E extends React.ElementType, P = {}> = P &
  Omit<ComponentPropsWithoutRef<E>, keyof P> & {
    as?: E;
  };

function Box<E extends React.ElementType = "div">({
  as,
  children,
  ...props
}: PolymorphicProps<E, { children?: ReactNode }>) {
  const Component = as || "div";
  return <Component {...props}>{children}</Component>;
}

// 使用
<Box as="a" href="/home">Link</Box>       // ✅ a标签的属性
<Box as="button" onClick={() => {}}>Btn</Box> // ✅ button的属性

// === 4. 辨识联合类型（Discriminated Union） ===
type AlertProps =
  | { type: "success"; onClose: () => void }
  | { type: "error"; onRetry: () => void; errorCode: number }
  | { type: "warning"; onDismiss: () => void };

function Alert(props: AlertProps) {
  switch (props.type) {
    case "success":
      return <div onClick={props.onClose}>✅ Success</div>;
    case "error":
      return <div onClick={props.onRetry}>❌ Error {props.errorCode}</div>;
    case "warning":
      return <div onClick={props.onDismiss}>⚠️ Warning</div>;
  }
}

import { useState, useReducer, useCallback, useEffect, useRef } from "react";

// === 泛型 Hook：useFetch ===
interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

function useFetch<T>(url: string, options?: RequestInit): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    const controller = new AbortController();
    setState({ data: null, loading: true, error: null });

    fetch(url, { ...options, signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json() as Promise<T>;
      })
      .then((data) => setState({ data, loading: false, error: null }))
      .catch((error) => {
        if (error.name !== "AbortError") {
          setState({ data: null, loading: false, error });
        }
      });

    return () => controller.abort();
  }, [url]);

  return state;
}

// 使用：返回值类型自动推断
const { data, loading } = useFetch<User[]>("/api/users");
// data 类型为 User[] | null

// === 类型安全的 useReducer ===
// 定义 State 和 Action 类型
interface TodoState {
  todos: { id: string; text: string; done: boolean }[];
  filter: "all" | "active" | "completed";
}

type TodoAction =
  | { type: "ADD_TODO"; payload: { text: string } }
  | { type: "TOGGLE_TODO"; payload: { id: string } }
  | { type: "DELETE_TODO"; payload: { id: string } }
  | { type: "SET_FILTER"; payload: { filter: TodoState["filter"] } };

function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case "ADD_TODO":
      return {
        ...state,
        todos: [
          ...state.todos,
          { id: crypto.randomUUID(), text: action.payload.text, done: false },
        ],
      };
    case "TOGGLE_TODO":
      return {
        ...state,
        todos: state.todos.map((t) =>
          t.id === action.payload.id ? { ...t, done: !t.done } : t
        ),
      };
    case "DELETE_TODO":
      return {
        ...state,
        todos: state.todos.filter((t) => t.id !== action.payload.id),
      };
    case "SET_FILTER":
      return { ...state, filter: action.payload.filter };
  }
}

function TodoApp() {
  const [state, dispatch] = useReducer(todoReducer, {
    todos: [],
    filter: "all",
  });

  // ✅ dispatch 的参数类型完全安全
  dispatch({ type: "ADD_TODO", payload: { text: "学习TS" } });
  // ❌ dispatch({ type: "ADD_TODO", payload: { id: "1" } }); // 编译错误
}

// === 泛型 useLocalStorage ===
function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {  // try/catch捕获异常
      const item = localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = useCallback(
    (value: T | ((prev: T) => T)) => {
      setStoredValue((prev) => {
        const nextValue = value instanceof Function ? value(prev) : value;
        localStorage.setItem(key, JSON.stringify(nextValue));
        return nextValue;
      });
    },
    [key]
  );

  return [storedValue, setValue];
}

import { createContext, useContext, ReactNode, useReducer } from "react";

// === 解决 Context 默认值问题 ===
// 方法1：使用 null + 非空断言 Hook
interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;  // Promise异步操作容器：pending→fulfilled/rejected
  logout: () => void;
  isAuthenticated: boolean;
}

const AuthContext = createContext<AuthContextType | null>(null);

// 自定义 Hook 封装 null 检查
function useAuth(): AuthContextType {
  const context = useContext(AuthContext);
  if (context === null) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
}

function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (email: string, password: string) => {  // async定义异步函数；await等待Promise完成
    const res = await fetch("/api/login", {  // await等待异步操作完成
      method: "POST",
      body: JSON.stringify({ email, password }),
    });
    const user = await res.json();
    setUser(user);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider
      value={{ user, login, logout, isAuthenticated: !!user }}
    >
      {children}
    </AuthContext.Provider>
  );
}

// 使用
function Dashboard() {
  const { user, isAuthenticated, logout } = useAuth(); // ✅ 类型完全安全
  if (!isAuthenticated) return <Redirect to="/login" />;
  return <div>Welcome, {user!.name}</div>;
}

// === 方法2：泛型 Context 工厂 ===
function createSafeContext<T>(displayName: string) {
  const Context = createContext<T | undefined>(undefined);
  Context.displayName = displayName;

  function useContextSafe(): T {
    const ctx = useContext(Context);
    if (ctx === undefined) {
      throw new Error(`use${displayName} must be used within ${displayName}Provider`);
    }
    return ctx;
  }

  return [Context.Provider, useContextSafe] as const;
}

// 使用工厂
const [ThemeProvider, useTheme] = createSafeContext<{
  theme: "light" | "dark";
  toggle: () => void;
}>("Theme");