在 TS 4.9.3 中使用新的“satisfies”运算符时，Typescript React 应用程序会抛出错误

Question

我想satisfies在我的Typescript React应用程序中使用 new 运算符，但它不起作用。

这是package.json相关typescript的包详细信息。

{
    "dependencies": {
        .
        .
        .
        "babel-plugin-react-require": "^3.1.3",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        .
        .
        .
    },
    "devDependencies": {
        "@babel/core": "^7.16.0",
        "@babel/plugin-transform-runtime": "^7.16.10",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "@babel/preset-typescript": "^7.18.6",
        "@types/react": "^17.0.36",
        "@types/react-dom": "^17.0.11",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "babel-loader": "^8.2.3",
        "esbuild-loader": "^2.20.0",
        "eslint": "^8.3.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-import-resolver-typescript": "^3.5.2",
        "eslint-plugin-eslint-comments": "^3.2.0",
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.27.1",
        "eslint-plugin-react-hooks": "^4.3.0",
        "eslint-plugin-storybook": "^0.6.7",
        "typescript": "^4.9.3",
        "webpack": "^5.75.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.5.0",
        "webpack-merge": "^5.8.0"
    }
}

可能是什么原因？

我已将所有typescript相关软件包升级到最新版本，但问题尚未解决

Answer 1

看来问题是babel版本引起的。（但请对我的回答持保留态度，因为我仍在学习）

satisfies 运算符是在 Typescript 4.9 中引入的，并且babel 从 7.20.0 开始支持这个 Typescript 版本。

在发行说明中，babel 特别提到@babel/plugin-transform-typescript并@babel/preset-typescript使用 satisfies。但npm 包的最新版本@babel/preset-typescript是 7.18.6。

所以在我看来，要解决你的问题，你可以：

• 手动安装支持版本@babel/preset-typescript
• 切换到@babel/plugin-transform-typescript
• 等待npm包更新

Answer 2

VSCode 使用它自己的 Typescript 版本。因此它可能使用不理解satisfies关键字的旧版本。

你可以：

• 将 VSCode 升级到最新版本
• 通过在命令面板中进行选择来使用打字稿的工作区版本Typescript: Select Typescript version...。

另请注意，您必须重新启动 TS Server。因此，重新启动 VSCode 即可查看效果。