TypeScript中函数与字符串联合类型声明报错问题咨询

问题描述 #

我尝试为属性声明一个由函数类型和字符串类型组成的联合类型，代码如下：

export type IMenuItem = {
    target: string | (val1:any[], val2:number) => number;
}

TypeScript编译器报错："Function type notation must be parenthesized when used in a union type."

请问该类型声明是否有误？是否有解决办法？

另外，当移除联合类型，仅保留函数类型时代码可正常运行：

export type IMenuItem = {
    target: (val1:any[], val2:number) => number;
}

问题分析与解决 #

你的类型声明确实存在语法问题。TypeScript在解析联合类型中的函数类型时，会因语法歧义无法正确识别函数类型的范围，因此要求必须将函数类型用括号包裹，明确它是联合类型的一个独立成员。

解决方法1：直接包裹函数类型

把函数类型用括号括起来，消除语法歧义：

export type IMenuItem = {
    target: string | ((val1: any[], val2: number) => number);
}

解决方法2：使用类型别名

先将函数类型单独定义为类型别名，再在联合类型中使用，提升代码可读性：

type TargetFunction = (val1: any[], val2: number) => number;
export type IMenuItem = {
    target: string | TargetFunction;
}

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