为含transform的input.required添加类型后编译失败，求助原因

我编写了如下代码片段：

filterCriteria = input.required({
  transform: (value: string) => value.toLocaleLowerCase(),
  alias: 'listCriteria'
});

希望通过transform方法转换输入值，但只要为input.required部分添加类型，代码就无法编译，报错信息为：

TS2322: Type '(value: string) => string' is not assignable to type 'undefined'.

问题原因 #

这是因为input.required()的类型推断逻辑限制：当未显式指定泛型参数时，TypeScript会默认将配置对象中的transform类型推断为undefined（对应input.required的重载规则，transform为可选属性且默认值是undefined），而给transform赋值字符串转换函数后，就会触发类型不兼容的报错。

解决方法 #

有两种可行的写法：

• 显式指定泛型参数：明确输入和转换后的类型，让TypeScript正确识别transform的函数类型

// 输入和输出类型都是string时，可简写为input.required<string>({...})
filterCriteria = input.required<string, string>({
  transform: (value: string) => value.toLocaleLowerCase(),
  alias: 'listCriteria'
});

• 依赖上下文自动推断类型：去掉transform函数参数的显式类型标注，让TypeScript根据input.required的上下文自动推断参数类型

filterCriteria = input.required({
  transform: value => value.toLocaleLowerCase(),
  alias: 'listCriteria'
});

通过以上两种方式，就能解决类型不匹配的编译报错，同时保证filterCriteria的类型符合模板要求。

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