TypeScript if条件块内报错：已排除undefined仍提示类型不兼容

先看报错场景代码：

type Fruit = {
  name: string;
};

const myFruits: Fruit[] = [{ name: "Apple" }, { name: "Banana" }];

let asyncFuncResult: string | undefined = "NewName";
const asyncFuncResultConst: string | undefined = "NewName";
let result;

// 此处TypeScript报错
if (asyncFuncResult) {
  result = myFruits.map(
    (fruit): Fruit => {
      return {
        ...fruit,
        name: asyncFuncResult // 错误：Type 'string | undefined' is not assignable to type 'string'
      };
    }
  );
}

报错提示：

Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'

报错原因 #

核心问题在于asyncFuncResult是let声明的变量：

• TypeScript的类型收窄仅在当前同步代码块的直接作用域内有效。进入map的回调函数后，TypeScript无法保证这个变量的值没有被外部代码修改（比如异步操作、其他函数篡改），因此会恢复它的原始联合类型string | undefined。
• 对比asyncFuncResultConst（const声明），由于const变量的值不可被重新赋值，TypeScript可以确定在回调执行时它的状态依然是判断后的非undefined，所以类型收窄会一直有效。

解决方法 #

方法1：将变量转存为const常量（推荐） #

在if块内把asyncFuncResult赋值给一个const变量，利用const的不可变性让TypeScript保持类型收窄：

if (asyncFuncResult) {
  const safeName = asyncFuncResult;
  result = myFruits.map(
    (fruit): Fruit => {
      return {
        ...fruit,
        name: safeName
      };
    }
  );
}

方法2：使用非空断言（谨慎使用） #

如果你能100%确定回调执行时变量不会变为undefined，可以用非空断言!强制告诉TypeScript变量不为undefined：

if (asyncFuncResult) {
  result = myFruits.map(
    (fruit): Fruit => {
      return {
        ...fruit,
        name: asyncFuncResult!
      };
    }
  );
}

方法3：将变量改为const（业务允许时） #

如果变量不需要后续被重新赋值，直接声明为const即可解决问题：

const asyncFuncResult: string | undefined = "NewName";

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