TypeScript将类型校验赋值给变量后在if语句使用报错如何解决？

问题原因 #

这是TypeScript旧版本控制流分析的固有限制：

• 内联写在if条件中的类型判断，TS可以直接识别并对对应变量做联合类型收窄
• 提取为独立变量后，TS 4.4以下版本不会将该布尔变量的取值和原变量的类型关联，因此无法触发类型收窄，该问题没有对应的配置项可以在旧版本中开启兼容。

解决方案 #

方案1：升级TypeScript版本

将TypeScript升级到4.4及以上版本即可，该版本新增了对常量别名条件的控制流收窄能力，属于默认开启的核心特性，无需额外调整配置，你写的变量提取代码可以直接正常工作。

方案2：兼容旧版本的替代写法

如果不能升级TS版本，可以用以下两种写法实现相同效果：

1. 封装为带类型谓词的判断函数

// 此处把ReportUnion替换为你clickedReport的实际联合类型
function isAvailableReport(item: ReportUnion): item is LookerItemTypes.AvailableReport {
  return item.__typename === LookerItemTypes.AvailableReport;
}

// 使用时
if (isAvailableReport(clickedReport)) {
    clickedReport.lookerUrl = await getReportUrl(clickedReport);
}

2. 给提取的判断变量手动加类型谓词标注

const matchesType: clickedReport is LookerItemTypes.AvailableReport = clickedReport.__typename === LookerItemTypes.AvailableReport;
if (matchesType) {
    clickedReport.lookerUrl = await getReportUrl(clickedReport);
}

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