Cách bật chuỗi tùy chọn với Tạo ứng dụng và TypeScript

Hỗ trợ cho cú pháp thử nghiệm 'không bắt buộc' hiện chưa được bật

Tôi đã nhận được các lỗi trên. Tôi theo dõi bài đăng này và thêm "@babel/plugin-proposal-optional-chaining": "^7.7.4"vào của tôi devDependencies.

Sau đó, tôi nhận được lỗi này,

Thêm @ babel / plugin-đề xuất-tùy chọn-chuỗi ( https://git.io/vb4Sk ) vào phần 'plugin' trong cấu hình Babel của bạn để cho phép chuyển đổi.

Vì vậy, tôi đã theo dõi bài đăng này và thêm .babelrctập tin vào thư mục gốc của dự án của tôi

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

Điều này dường như không làm gì cả. Tôi cũng nghe ai đó nhắc đến việc Create React Appkhông cho phép bạn sửa đổi cấu hình của babel. Vì vậy, câu hỏi của tôi là làm thế nào tôi có thể kích hoạt chuỗi tùy chọn mà không cần nối lại toàn bộ CRA?

PS tôi đang sử dụng "typescript": "^3.7.2", hoặc ít nhất đó là những gì tôi package.jsonnói. Tôi đã cố gắng npm installđể đảm bảo nó được cập nhật. Không chắc chắn nếu CRAlàm điều gì đó kỳ lạ bên dưới và sử dụng phiên bản cũ hơn TypeScriptbằng cách nào đó.

EDIT: Khi tôi bắt đầu dự án CRA, tôi tin rằng chúng tôi đang sử dụng TypeScript: 3.6.x. Tôi muốn sử dụng Optional Chaining, vì vậy tôi đã thay đổi package.jsontập tin của mình thành "typescript": "^3.7.2"sau đó npm install. Tôi nghĩ vấn đề là, TypeScriptbiết rằng tôi đang sử dụng 3.7.2, nhưng CRAvẫn có cấu hình cũ hơn và tôi không chắc làm thế nào tôi có thể cập nhật điều đó.

Tạo-React-App sử dụng babel để dịch mã TypeScript để nó không sử dụng phiên bản TypeScript được cài đặt npm của bạn. Phiên bản 3.3.0 của tập lệnh phản ứng hỗ trợ TypeScript 3.7. Bạn có thể cài đặt nó và sử dụng nó với:

• yarn add react-scripts@3.3.0

  -hoặc là-

• npm install -s react-scripts@3.3.0

React script 3.3.0 trở lên hỗ trợ nó. Không cần phải cài đặt các tập lệnh React @ next.

Chỉ cần đặt trong gói.json "react-scripts": "^3.3.0"và nó sẽ hoạt động.

pack.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"]
}

blogpost chi tiết