TS18048错误解析：嵌套异步函数中result为何可能未定义？

在以下代码中，外部的console.log(aa)可以正常输出"aa"，但嵌套的异步函数中使用result变量时，却触发了类型错误提示：TS18048: 'result' is possibly 'undefined'。

请解释两者的差异，为什么外部能正常解构并使用aa，而内部函数解构result.a时会出现这个错误？

示例代码 #

interface Result {
  a: Record<string, string>;
  b: string;
  c: string
}

const func = async (): Promise<Result> => {
  // some logic
  return {
    a: {
        aa: 'aa',
      bb: 'bb',
      cc: 'cc'
    },
    b: 'b',
    c: 'c'
  };
}

const func2 = async (val: string): Promise<string> => {
  // some logic
  return `${val}-string`;
}

(async () => {
  let result: Result | undefined;

  await func().then(response => (result = response));

  if (!result) {
    return;
  }

    const { aa } = result.a;
  console.log(aa);

  (async () => {
    const { bb } = result.a; // TS18048: 'result' is possibly 'undefined'
  
    await func2(bb).then(response => console.log(response));
  })();
})();

相关配置文件 #

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noEmit": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": "./",
    "outDir": "./dist",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ],
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "webpack/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json #

{
  "name": "wrapper",
  "license": "UNLICENSED",
  "type": "module",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack/webpack.config.dev.js",
    "build:stage": "webpack --config ./webpack/webpack.config.stage.js",
    "build:prod": "webpack --config ./webpack/webpack.config.prod.js"
  },
  "devDependencies": {
    "@babel/core": "7.20.12",
    "@babel/plugin-proposal-class-properties": "7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
    "@babel/preset-env": "7.20.2",
    "@babel/preset-typescript": "7.18.6",
    "@types/google-publisher-tag": "1.20220926.0",
    "@types/node": "18.11.18",
    "@typescript-eslint/eslint-plugin": "5.48.0",
    "@typescript-eslint/parser": "5.48.0",
    "babel-loader": "9.1.2",
    "eslint": "8.31.0",
    "eslint-config-prettier": "8.6.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-webpack-plugin": "3.2.0",
    "html-webpack-plugin": "5.5.0",
    "prettier": "2.8.2",
    "ts-loader": "9.4.2",
    "ts-node": "10.9.1",
    "typescript": "4.9.4",
    "webpack": "5.75.0",
    "webpack-cli": "5.0.1",
    "webpack-dev-server": "4.11.1",
    "webpack-merge": "5.8.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie <= 11"
  ]
}

问题解答 #

核心差异：TypeScript控制流分析的作用域限制 #

• 外部代码里，if (!result) { return; }执行后，TypeScript的控制流分析能确定当前函数作用域内的result已经不可能是undefined——因为如果result是undefined，代码已经提前return退出了。所以后续解构result.a时，TS能确认result的类型是Result，不会报错。
• 嵌套的异步函数是一个独立的函数作用域，TS无法保证这个函数执行时，外部的result变量没有被其他代码修改（哪怕你的代码里没改，TS的静态分析也不会做这种假设）。简单说：TS的类型窄化结果不会跨函数边界传递，它无法跟踪到内部函数执行时result依然是有效的Result类型。

修复方案 #

方案1：将result作为参数传入内部函数（推荐）

把外部的result作为参数传入嵌套函数，让TS能明确内部使用的变量类型：

(async () => {
  let result: Result | undefined;

  await func().then(response => (result = response));

  if (!result) {
    return;
  }

  const { aa } = result.a;
  console.log(aa);

  // 传入result作为内部函数的参数
  (async (innerResult) => {
    const { bb } = innerResult.a; 
    await func2(bb).then(response => console.log(response));
  })(result);
})();

方案2：使用类型断言（谨慎使用）

明确告诉TSresult不可能是undefined，仅当你能100%保证变量不会被修改时使用：

(async () => {
  // ... 其他代码
  (async () => {
    const { bb } = (result as Result).a; 
    await func2(bb).then(response => console.log(response));
  })();
})();

方案3：用const声明变量（最优简化）

如果result不需要重新赋值，直接用const配合await赋值，TS能更精准地跟踪类型：

(async () => {
  // 直接用const，避免undefined类型
  const result = await func();

  const { aa } = result.a;
  console.log(aa);

  (async () => {
    const { bb } = result.a; 
    await func2(bb).then(response => console.log(response));
  })();
})();

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