React.lazy使用触发'union type that is too complex to represent'报错求解

这是TypeScript 4.2~4.6版本区间存在的JSX类型推断边界bug，触发逻辑如下：

• React.lazy返回的是带泛型的LazyExoticComponent类型，当这个组件第一次被使用的场景是嵌套在React.Suspense内部的多层JSX结构中时，TypeScript需要同时完成三类类型的联合计算：Suspense组件的fallback类型匹配、多层DOM元素的props类型校验、lazy组件本身的异步导入泛型推断。
• 4.2版本后TypeScript收紧了类型递归深度和联合类型复杂度的默认限制，多重计算叠加就超过了上限，触发Expression produces a union type that is too complex to represent报错。你提到的4.1.2版本不受影响，就是因为该版本还没有引入对应的类型限制规则。

你提前声明const dummy = <Fr />时，TypeScript会在解析到这行代码时就提前完成Fr组件的类型推断，将其组件类型固定下来。等到后续在Suspense嵌套结构中使用该组件时，不需要再做全链路的联合类型计算，相当于拆分了类型计算的复杂度，自然就不会触发复杂度超限报错。

如果不想保留无意义的dummy变量，可以选择以下任意一种方案：

• 升级TypeScript到4.7及以上版本，该bug已经在TypeScript 4.7的正式版本中被官方修复
• 手动给lazy组件标注显式类型，避免TypeScript做自动泛型推断：

const Fr: React.LazyExoticComponent<() => JSX.Element> = React.lazy(
  () => import('./Fragment')
);

• 若项目允许单文件临时跳过类型校验，可以在报错的Fr组件调用行上方加// @ts-ignore注释

内容的提问来源于stack exchange，提问作者Ahmet Can Güven