如何使用 Create React App 和 TypeScript 启用可选链

Question

当前未启用对实验性语法“optionalChaining”的支持

我收到了上述错误。我关注了这篇文章并添加"@babel/plugin-proposal-optional-chaining": "^7.7.4"到我的devDependencies.

然后我收到这个错误，

将 @babel/plugin-proposal-optional-chaining ( https://git.io/vb4Sk ) 添加到 Babel 配置的“插件”部分以启用转换。

所以我按照这篇文章并将.babelrc文件添加到我的项目根目录中

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

这似乎没有做任何事情。我也听到有人提到Create React App不允许你修改 babel 的配置。所以我的问题是如何在不重新布线的情况下启用可选链接CRA？

PS我正在使用"typescript": "^3.7.2"，或者至少我是这么package.json说的。我试图npm install确保它已更新。不确定是否CRA在下面做一些奇怪的事情并TypeScript以某种方式使用旧版本。

---

编辑： 当我用 开始项目时CRA，我相信我们正在使用TypeScript: 3.6.x. 我想使用Optional Chaining，所以我将package.json文件更改为"typescript": "^3.7.2"then npm install。我认为问题是，TypeScript知道我正在使用3.7.2，但CRA仍然有较旧的配置，我不确定如何更新它。

Answer 1

Create-React-App 使用 babel 来转译 TypeScript，所以它不使用你安装的 TypeScript 版本。react-scripts 3.3.0 版支持 TypeScript 3.7。您可以安装它并将其用于：

• yarn add react-scripts@3.3.0

  -或者-

• npm install -s react-scripts@3.3.0

Answer 2

包.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

config-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

详细的博文

Answer 3

React 脚本 3.3.0 及更高版本支持它。无需安装 react-scripts@next。

只需放入 package.json"react-scripts": "^3.3.0"就可以了。