TypeScript同一作用域内同一变量为何会存在两种不同类型

原因分析 #

这是TypeScript控制流分析的固有设计逻辑，不属于异常，具体成因如下：

• 你通过if(value instanceof Array) { return }提前过滤数组类型后，当前同步上下文下的value已经被收窄为string类型
• 当执行value = 'string'赋值操作时，TypeScript会触发类型加宽判断：由于value的初始声明类型为string | string[]，且是可重新赋值的变量（函数参数默认是可写的），TypeScript会保守地将变量的潜在类型恢复到声明时的宽泛类型，避免后续逻辑修改该变量导致类型误判
• 当你在箭头函数()=>value中引用value时，该箭头函数属于闭包，TypeScript无法预判这个闭包会在什么时候执行、执行前value会不会被重新赋值为string[]类型，因此不会对闭包内捕获的变量做类型收窄，只会取该变量最宽泛的声明类型string | string[]
• 直接调用getValue(value)时属于同步上下文直接取值，TypeScript可以确定当前value的类型就是string，因此不会报类型错误

解决方案 #

可以通过以下方式解决该类型问题：

• 方案1：将收窄后的value赋值给一个新的const常量，常量无法被重新赋值，TypeScript可以安全做类型收窄：

const fixedValue = value
getValue(() => fixedValue)

• 方案2：对闭包内的value添加类型断言，明确告知TypeScript其实际类型：

getValue(() => value as string)

• 方案3：删除多余的value = 'string'赋值操作：没有赋值操作触发类型加宽时，TypeScript会保留之前的类型收窄结果，闭包内也会将value识别为string类型。

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