箭头函数参数多类型触发TypeScript错误ts(2322)求解决方案

问题背景 #

我定义了一个配置对象，其中render字段是箭头函数：

const config:IConfig = {
    render: (item:string)=>item
}

由于item参数支持string或string[]类型，我最初写的接口是：

interface IConfig  {
    render: (item:string|string[])=>string
}

但这段代码直接抛出类型错误：

Types of parameters 'item' and 'item' are incompatible.
    Type 'string | string[]' is not assignable to type 'string'.
      Type 'string[]' is not assignable to type 'string'.(2322)

临时可行但冗余的解决方式 #

后来我换了一种接口写法，代码能正常运行：

interface IWorkingConfig {
    render: ((item:string )=>string) | ((item: string[])=>string)
}

这个接口用多个函数类型的联合替代了参数的联合类型，但弊端很明显：每次修改参数类型都要重复写一遍整个函数定义，冗余代码量会随着参数类型的增加而急剧上升。

优化方案 #

方案1：提取函数类型别名 #

先把函数类型提取成可复用的别名，再通过联合类型组合：

// 提取通用函数类型，约束参数为string或string[]
type RenderHandler<T extends string | string[]> = (item: T) => string;

interface IConfig {
    render: RenderHandler<string> | RenderHandler<string[]>;
}

后续如果需要新增参数类型（比如number），只需要修改RenderHandler的泛型约束，再添加对应的联合项即可，无需重复编写函数结构。

方案2：使用接口函数重载 #

直接在接口里定义函数重载签名，这也是TypeScript处理多参数类型函数的标准方式：

interface IConfig {
    render(item: string): string;
    render(item: string[]): string;
}

实现时，TS会自动匹配对应的重载签名，同时避免了冗余的函数类型重复定义。

为什么最初的接口会报错？ #

(item: string | string[]) => string表示这个函数必须同时能处理string和string[]类型的参数，但你传入的(item:string)=>item只能接受string，无法处理string[]，因此TS会抛出类型不兼容的错误。而联合函数类型((item:string)=>string)|((item:string[])=>string)则表示render可以是两种函数中的任意一种，你的实现符合其中一种，所以不会报错。

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