《TypeScript编程实战》13.2 表单类型推导与错误映射

import { z } from 'zod';
export const schema = z.object({
  tags: z.string().transform((s) => s.split(',').filter(Boolean)), // ① 转换
  role: z.enum(['admin', 'viewer']).default('viewer'),            // ② 默认值
  bio: z.string().optional(),                                     // ③ 可选
  age: z.coerce.number().int(),                                   // ④ 强制转换
});

// z.input<typeof schema> —— 表单里「能填什么」
type FormInput = {
  tags: string;
  role?: 'admin' | 'viewer' | undefined;
  bio?: string | undefined;
  age: unknown;              // 注意这里
};
// z.output<typeof schema> —— 提交给后端「是什么」
type FormOutput = {
  tags: string[];
  role: 'admin' | 'viewer';
  bio?: string | undefined;
  age: number;
};

type FormInputZod3 = {
  tags: string;
  role?: 'admin' | 'viewer' | undefined;
  bio?: string | undefined;
  age: number;               // Zod 3 仍标注为 number
};

declare function useForm<
  TFieldValues extends FieldValues = FieldValues,
  TContext = any,
  TTransformedValues = TFieldValues,
>(props?: UseFormProps<TFieldValues, TContext, TTransformedValues>): UseFormReturn<TFieldValues, TContext, TTransformedValues>;

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import type { z } from 'zod';
import { schema } from './schema';
type S = typeof schema;
export function useProfileForm() {
  return useForm<z.input<S>, any, z.output<S>>({
    resolver: zodResolver(schema),
    defaultValues: { tags: '', age: 0 },
  });
}

error TS2322: Type 'Resolver<{ tags: string; age: unknown; }, any,
{ tags: string[]; age: number; }>' is not assignable to type
'Resolver<{ tags: string[]; age: number; }, any, { tags: string[]; age: number; }>'.
  Types of parameters 'values' and 'values' are incompatible.
    Type '{ tags: string[]; age: number; }' is not assignable to type
    '{ tags: string; age: unknown; }'.
      Types of property 'tags' are incompatible.
        Type 'string[]' is not assignable to type 'string'.

{
  issues: [
    { code: 'too_small', path: ['nickname'], message: '昵称至少 2 个字符' },
    { code: 'invalid_string', path: ['email'], message: '邮箱格式不正确' },
    { code: 'custom', path: ['confirm'], message: '两次输入的密码不一致' },
  ]
}

const configExcerpt = {
  nickname: { type: 'too_small', message: '昵称至少 2 个字符' },
  email: { type: 'invalid_string', message: '邮箱格式不正确' },
  confirm: { type: 'custom', message: '两次输入的密码不一致' },
};

{errors.items?.[index]?.name && (
  <p role="alert">{errors.items[index]?.name?.message}</p>
)}

const form = useForm<z.input<S>, any, z.output<S>>({
  resolver: zodResolver(schema),
  criteriaMode: 'all',
});
// 读取：errors.password?.types 是一个对象
// { too_small: '密码至少 8 位', regex: '需包含数字' }

{errors.password?.types && (
  <ul>
    {Object.values(errors.password.types).map((msg) => (
      <li key={msg}>{msg}</li>
    ))}
  </ul>
)}

// shouldFocus 是可选布尔配置；下面展示一次调用
setError(name, { type, message }, { shouldFocus: true });

// 后端返回的统一错误结构
export type ApiError = {
  code: 'VALIDATION_FAILED' | 'CONFLICT' | 'UNAUTHENTICATED' | 'RATE_LIMITED' | 'INTERNAL';
  message: string;                                          // 给人看的整体说明
  details?: { path: (string | number)[]; message: string }[]; // 字段级错误
};

import type { UseFormSetError } from 'react-hook-form';
export function applyServerErrors<T extends FieldValues>(
  err: unknown,
  setError: UseFormSetError<T>,
) {
  const apiError = toApiError(err); // 把各种异常规整成 ApiError
  if (apiError.code === 'VALIDATION_FAILED' && apiError.details) {
    for (const d of apiError.details) {
      setError(d.path.join('.') as FieldPath<T>, { type: 'server', message: d.message });
    }
    return;
  }
  // 非字段级错误统一挂到 root，由表单顶部横幅展示
  setError('root.server', { type: apiError.code, message: apiError.message });
}

const onSubmit = async (values: z.output<S>) => {
  try {
    await api.save(values);
  } catch (e) {
    applyServerErrors(e, setError);
  }
};

import { get, type FieldErrors, type FieldPath, type FieldValues } from 'react-hook-form';
export function FieldError<T extends FieldValues>({
  errors,
  name,
}: {
  errors: FieldErrors<T>;
  name: FieldPath<T>;
}) {
  const err = get(errors, name) as { message?: string } | undefined;
  return err?.message ? <p role="alert">{err.message}</p> : null;
}