VSCode使用TypeScript satisfies关键字时编辑器报错但编译正常

我在VSCode（版本1.74.2）中使用TypeScript 4.9.4编写代码，用到了TS4.9新增的satisfies关键字，编译过程没有错误，但将文件保存为.ts格式后编辑器会报错。

代码示例 #

type Test = {
  t1: string;
};

export const TEST_JSON = {
  t1: 't1',
} satisfies Test;

错误信息 #

DevTools控制台捕获到来自workbench.desktop.main.js:774的错误：

unknown: Missing semicolon. (7:1) 
5 | export const TEST_JSON = { 
6 | t1: 't1', 
> 7 | } satisfies Test; 
| ^ 
8 |

环境信息 #

Version: 1.74.2
Commit: e8a3071ea4344d9d48ef8a4df2c097372b0c5161
Date: 2022-12-20T10:32:21.587Z (2 wks ago)
Electron: 19.1.8
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Darwin arm64 21.2.0
Sandboxed: No

解决方案 #

1. 切换VSCode使用的TypeScript版本 #

VSCode默认自带的TS版本可能低于4.9，不支持satisfies语法：

• 点击VSCode右下角状态栏的TypeScript版本号
• 在弹出选项中选择Use Workspace Version，切换到项目本地安装的4.9.4版本

2. 更新代码格式化工具（如Prettier） #

旧版本Prettier无法识别satisfies关键字，会误报语法错误：

• 将Prettier更新到2.8.0及以上版本（该版本开始支持TS4.9的satisfies语法）
• 检查项目的.prettierrc等配置文件，确保没有冲突规则

3. 更新TypeScript相关ESLint依赖 #

如果使用@typescript-eslint做代码检查，旧版本不兼容TS新语法：

• 更新@typescript-eslint/eslint-plugin和@typescript-eslint/parser到5.45.0及以上版本
• 重启ESLint服务或VSCode，让新配置生效

4. 禁用冲突的语法校验插件 #

若安装了过时的JavaScript语法校验插件，可能会误判TS新语法，尝试禁用这类插件后重新测试。

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