TypeScript可选链引发错误信息变量名替换问题咨询

问题现象 #

直接调用this.details.name.fullname()时，catch块能捕获到完整错误信息：TypeError: this.details.name.fullname is not a function；但添加可选链改为this.details.name?.fullname()后，捕获的错误变为TypeError: _a.fullname is not a function，无法定位到具体的对象路径，同时需要保留可选链来处理name可能为undefined的场景。

问题原因 #

你的tsconfig.json中target配置为es2015，而原生可选链是ES2020才引入的语法。TypeScript会将可选链编译为ES2015兼容的代码，编译过程中会生成临时变量（比如_a）替代原始对象路径，导致错误信息中的变量名被替换，丢失了原始的对象路径信息。

解决方案 #

方案1：升级编译目标到ES2020+ #

修改tsconfig.json的target选项为es2020或更高版本，让TypeScript直接输出原生可选链语法，运行时就能保留原始的对象路径信息：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2020", // 修改此处
    "rootDir": "./src",
    "outDir": "./build",
    "inlineSourceMap": false,
    "strict": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ]
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
    ".vscode"
  ]
}

该方案要求运行环境支持ES2020语法（如现代浏览器、Node.js 14及以上版本），编译后的代码会直接使用?.语法，既保留了可选链的空值处理能力，又能在调用失败时抛出包含完整对象路径的错误。

方案2：手动处理调用逻辑（兼容旧环境） #

如果必须兼容ES2015及更低版本的运行环境，无法升级编译目标，可以手动模拟可选链的逻辑，并在调用失败时抛出自定义的错误信息：

public async printName() {
    try {
        const nameObj = this.details.name;
        if (nameObj) {
            if (typeof nameObj.fullname === 'function') {
                nameObj.fullname();
            } else {
                throw new TypeError(`this.details.name.fullname is not a function`);
            }
        }
    } catch (err) {
        console.log(err);
    }
}

这种方式既处理了name可能为undefined的情况，又确保在fullname不是函数时，能抛出包含完整对象路径的错误信息。

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