使用tsc转换含??运算符的JS文件为TS时报错如何解决？

问题根因 #

1. TypeScript 3.7版本才首次支持空值合并运算符（??），低于该版本的tsc无法识别该语法。
2. 当前tsconfig配置中target设为ES5，且lib仅包含es2015，未包含支持??运算符的ES版本规范定义。
3. 示例代码中三目运算符和??运算符连用时未加括号明确优先级，部分TS版本会将该写法判定为语法错误。

解决方案 #

步骤1：升级TypeScript到3.7以上版本 #

执行命令查看当前TS版本：
tsc -v
如果版本低于3.7，执行升级：

• 全局升级：npm install -g typescript@latest
• 项目本地升级：npm install typescript@latest --save-dev

步骤2：修改tsconfig.json配置 #

调整编译目标和lib配置，以下两种方案二选一即可：

• 方案A：不需要兼容ES5环境，直接将编译目标设为ES2020及以上版本
• 方案B：需要兼容ES5环境，保留target为ES5，补充lib配置

修改后的完整tsconfig参考：

{
    "compilerOptions": {
        "checkJs": false,
        "module": "commonjs",
        "target": "ES5", 
        "allowJs": true,
        "rootDir": "./",
        "baseUrl": "./",
        "outDir": "./build",
        "noStrictGenericChecks": true,
        "skipLibCheck": true,
        "strictFunctionTypes": false,
        "lib": [
            "es2015",
            "es2020", 
            "dom"
        ],
        "downlevelIteration": true
    },
    "exclude": [
        "./build/**"
    ]
}

如果选择方案A，把target改成ES2020即可，不需要新增es2020的lib配置。

步骤3：解决运算符优先级问题 #

如果修改配置后仍然报TS1109错误，是因为三目运算符和??运算符连用时优先级不明确导致的，可选择两种处理方式：

• 可接受少量修改源码的情况下，给三目运算符的后半段加括号即可：this.x = typeof params.x == "string" ? this._processStringParam(params.x, "x") : (params.x ?? 0);
• 不想修改原有JS源码的情况下，在tsconfig的compilerOptions中新增"strictNullChecks": false配置，关闭严格空值检查的同时会放宽语法优先级校验。

修改完成后重新执行tsc命令即可正常识别??运算符，完成JS到TS的转换。

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