三元运算符调用usePewFetcher报TS2345：Type A无法赋值给Type B

问题原因 #

你的代码中，pewFetcher.projectApplicationsFromProject()返回Promise<ApplicationProject[]>，pewFetcher.applications()返回Promise<Application[]>，两者均继承自Element[]但属性不同。

• 三元运算符场景：TypeScript会尝试推断两个分支的最小公共兼容类型，这里会将两个Promise的泛型参数推断为ApplicationProject[] & Application[]（交叉类型），而这个交叉类型因两个子类属性不兼容，无法赋值给Element[]|null，从而触发TS2345类型不匹配错误。
• if-else场景：两次独立调用usePewFetcher，泛型T分别被推断为ApplicationProject[]和Application[]，返回值类型分别是ApplicationProject[]|null和Application[]|null。赋值给let data时，TypeScript会自动将变量类型推断为这两个返回值的联合类型Element[]|null，符合预期，因此无报错。

解决方法 #

方法1：显式指定泛型参数 #

直接给usePewFetcher指定泛型Element[]，强制TypeScript使用父类类型进行推断：

const data : Element[]|null = usePewFetcher<Element[]>(
    projectId ? 
      pewFetcher.projectApplicationsFromProject({id: projectId}):
      pewFetcher.applications({})
    , []
  )

方法2：显式断言三元运算符结果类型 #

将三元运算符的结果断言为Promise<Element[]>，告诉TypeScript分支返回的Promise统一为父类数组类型：

const data : Element[]|null = usePewFetcher(
    (projectId ? 
      pewFetcher.projectApplicationsFromProject({id: projectId}):
      pewFetcher.applications({})) as Promise<Element[]>
    , []
  )

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