TypeScript泛型接口extends约束与默认类型赋值语法解析

首先明确核心结论：接口名后尖括号内的内容不是类型断言，是泛型的类型参数声明段，你疑惑的= FieldValues是泛型参数的默认值语法，和extends约束是配合使用的独立语法，二者作用完全不冲突。

泛型参数声明的三段式结构 #

你看到的单条泛型参数TFieldValues extends FieldValues = FieldValues是TS泛型的标准写法，拆成三部分理解：

• TFieldValues：泛型参数名，和函数的形参名作用一致，是后续类型推导中用到的占位变量
• extends FieldValues：泛型约束，和你已掌握的extends用法一致——要求所有传入该位置的类型，必须是FieldValues的子类型，不符合结构的类型传入时TS会直接抛出类型错误，从根源避免非法类型打破react-hook-form的内部类型推导逻辑
• = FieldValues：泛型参数默认值，和JS函数参数的默认值逻辑完全一致：当使用该接口时，如果开发者没有手动传入对应位置的泛型参数，TS会自动用等号后的类型作为兜底类型填充

可以直接用JS函数参数的逻辑类比这段泛型声明：

// 对应JS逻辑的等价写法
const createFormOptions = (TFieldValues = FieldValues, TContext = object) => {
  // 运行时校验逻辑，对应TS编译时的extends约束
  if (!isSubType(TFieldValues, FieldValues)) throw new Error('类型不符合要求')
}

为什么约束和默认值必须同时写 #

二者解决的是完全不同的问题，缺一个都会影响使用体验或类型安全：

• 如果只写extends约束不写默认值：每次使用OptionsForForm接口时，都必须手动传入所有泛型参数，哪怕不需要自定义表单类型，也要写OptionsForForm<FieldValues, object>，冗余度很高
• 如果只写默认值不写extends约束：使用者可以传入任意不符合FieldValues结构的类型，会直接导致react-hook-form的字段、值、方法类型推导失效，失去TS的类型保护能力

实际使用场景示例 #

基于你写的接口，两种常见用法都能被正常支持：

1. 简单表单不需要严格类型约束时，无需传入泛型，TS自动用默认类型推导：

// 不需要手动传泛型，自动套用默认的FieldValues、object类型
const simpleFormOptions: OptionsForForm = {
  defaultValues: { nickname: '' },
  schema: yup.object({ nickname: yup.string().min(2).required() })
}

2. 复杂表单需要严格类型校验时，手动传入泛型，extends约束会自动校验传入类型的合法性：

interface LoginForm {
  username: string
  password: string
}
// 手动传入表单类型，后续所有表单操作都会自动推导为LoginForm类型
// 如果传入的类型不符合FieldValues结构（比如传入基础类型string），TS会直接报错
const loginFormOptions: OptionsForForm<LoginForm> = {
  defaultValues: { username: '', password: '' }, // 字段名写错、类型不匹配都会触发TS报错
  schema: loginFormSchema,
  context: { loginType: 'account' }
}

常见误区澄清 #

不要把泛型默认值和类型断言混淆：

• 类型断言是开发者手动强制覆盖TS的类型判断，属于绕过类型检查的手段，存在类型安全风险
• 泛型默认值是TS提供的语法糖，仅在使用者未指定泛型参数时自动填充兜底类型，填充的默认类型本身也必须符合前面的extends约束，不会引入类型问题

内容的提问来源于stack exchange，提问作者Samke11