TypeScript接口定义string/返回JSX.Element函数类型的正确语法

你最初写的string | () => JSX.Element语法不符合TS解析规则，TS会把它误解析为「参数是string或空类型、返回JSX.Element的函数」，本质是函数类型的运算符优先级高于联合类型，需要给函数类型整体加括号明确边界。

正确的接口定义代码如下：

interface SomeInterface {
  someProperty: string | (() => JSX.Element)
}

写法说明 #

• 之前用string | Function的方案属于宽泛类型校验：Function是TS的顶层函数类型，不会校验函数的参数、返回值，哪怕传入返回数字、字符串的非预期函数，TS也不会报错，完全失去类型约束的意义。
• 加括号后的写法可以实现精准约束：
  • 传入值为字符串时，TS会校验其为合法string类型
  • 传入值为函数时，TS会强制校验该函数无入参，且返回值必须为JSX.Element类型，不符合要求的传值会直接抛出类型错误。

如果是React开发场景，如果你希望属性还支持数字、Fragment、null等合法React节点，可以直接用内置类型React.ReactNode，但如果严格要求只能是字符串或者返回JSX.Element的无参函数，用上述加括号的写法即可。

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