Typescript 在条件 (IF) 块内显示错误，其中不应有未定义的值

发布于07月26日

在一个项目上陷入了一个奇怪的境地.以下是TS显示错误的示例:

type Fruit = {
  name: string;
};

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

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

// Why TS shows an issue here?
if (asyncFuncResult) {
  result = myFruits.map(
    (fruit): Fruit => {
      return {
        ...fruit,
        name: asyncFuncResult
      };
    }
  );
}

它对第name: asyncFuncResult行说:

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

以下是我找到的解决方法的演示和方法: CodeSandBox Demo个

但我不明白为什么它会显示错误.如果变量是未定义的，我们不会进入条件块.因此，我们不可能将未定义的值赋给字符串.

推荐答案

TypeScrip只是对控制流分析持悲观态度(参见#9998).

The type of asyncFuncResult is string in the same scope where you checked the variable (inside the if).
But when you use it in the callback of the map operator it is used in another scope - and since it is a variable (i.e. let) it could be changed by some other code before the callback is executed, so typescript pessimistically assumes string | undefined

if (asyncFuncResult) {
  const aString = asyncFuncResult; // type of asyncFuncResult = 'string'
  result = myFruits.map(
    (fruit): Fruit => {
      return {
        ...fruit,
        name: asyncFuncResult // type of asyncFuncResult = 'string' | undefined
      };
    }
  );
}

我建议改用常量:

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

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

非空断言操作符(!)也可以工作，但我会尽量避免它.