如何在TypeScript中使用??=语法 解决Unexpected token报错问题

??= 是ES2021标准定义的逻辑赋值运算符，结合你列的依赖版本来看，报错不是因为语法本身不被支持，基本是编译链路的配置匹配问题，按以下步骤调整即可正常使用：

核心根因 #

你当前用的TypeScript 4.1.3其实从4.0小版本开始就已经完整支持??=、||=、&&=这类逻辑赋值语法的解析，报错触发的原因逃不出两个方向：

• TS4.1版本下的默认配置，没有覆盖ES2021新语法的识别范围
• 你使用的webpack 5.11.0是webpack5的首发早期版本，内置的语法解析器版本较老，无法识别这个新token

具体配置调整 #

1. 补全tsconfig的缺失配置 #

你目前只写了target和module两个核心字段，TS4.1版本下默认的ESNext lib集合还没完整覆盖ES2021的语法定义，直接写很容易触发解析异常，需要显式把ES2021加入lib列表：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["ESNext", "DOM", "DOM.Iterable", "ES2021"]
  }
}

不需要改其他编译开关，只要lib字段配全，TS本身就能正常识别??=语法。

2. 校准webpack的编译链路 #

webpack5首发版本内置的acorn语法解析器版本较低，本身不支持识别ES2021的新语法，只要满足两个要求就不会报错：

• 一定要给.ts后缀的文件配置对应的转译loader（比如ts-loader，或者配合babel-loader处理TS），不能让webpack直接解析原始TS文件——webpack本身完全不具备TS语法解析能力，直接读ts文件不仅识别不了??=，连类型注解都会触发语法报错
• 如果用babel做转译，要确保@babel/preset-env版本不低于7.12，这个版本开始就原生支持逻辑赋值语法的识别，不需要单独装额外的提案插件

额外提醒：如果你是直接在Node.js环境跑TS代码，要注意Node.js版本低于15.0的话，本身运行时就不支持??=语法，就算编译环节全过，运行时也会抛同样的SyntaxError，这种情况把Node.js升到15以上版本就行。

容易踩的坑 #

• 别觉得写了target: ESNext就万事大吉：TS4.1发布时ES2021还在最终的标准审议阶段，内置的ESNext定义没有包含对应语法的完整规则，缺了显式的lib配置很容易出现奇怪的解析报错
• 不要为了兼容老版本刻意把??=转成低版本写法：只要你的目标运行环境（浏览器、Node）支持ES2021语法，转译时保留原写法完全没问题，只要确保转译后的代码能被webpack当前版本的解析器识别就行

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