React 項目中的 tsx 擴展錯誤 Typescript

Question

我正在嘗試將我的項目從 js 移動到 ts，所以我已經安裝了 typescript，現在我正在將所有文件的擴展名從 .js 更改為 .tsx，然后我嘗試再次啟動該項目並且似乎可以' t 解析.tsx 文件

這是我的項目的文件夾樹（請注意，我只是出於測試目的將我的 Button 組件更改為 .tsx，而不是所有文件，否則我會得到更多錯誤）

這是我在控制台中得到的錯誤

> ERROR in ./src/components/Button/Button.styles.js 3:0-30
Module not found: Error: Can't resolve './Button' in 'C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button'
resolve './Button' in 'C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button'
  using description file: C:\Users\sriera\Desktop\Nuevacarpeta\pt\package.json (relative path: ./src/components/Button)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\sriera\Desktop\Nuevacarpeta\pt\package.json (relative path: ./src/components/Button/Button)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button doesn't exist
      .web.mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.mjs doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.mjs doesn't exist
      .web.js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.json doesn't exist
      .web.jsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.jsx doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.jsx doesn't exist
      as directory
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button doesn't exist
 @ ./src/components/UserList/UserList.js 11:0-55 101:45-57
 @ ./src/pages/Home/Home.js 5:0-58 23:35-43
 @ ./src/App.js 8:0-37 27:44-48
 @ ./src/index.js 8:0-24 18:39-42

webpack 5.69.1 compiled with 1 error in 793 ms

ofc，如果我只是將 tsx 擴展名更改為 js，它仍然有效

編輯：這是package.json

    {
  "name": "pt",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.4.4",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "eslint": "^8.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/react": "^12.1.3",
    "jest": "^27.5.1",
    "redux-devtools": "^3.7.0",
    "redux-devtools-extension": "^2.13.9",
    "typescript": "^4.6.2"
  }
}

有人有想法嗎？

謝謝！

Answer 1

默認 CRA 模板是為 JavaScript 而不是 TypeScript 構建的。

您現在可以做的就是按照 Tiago 提供的文章中的步驟進行操作。 另外從下次開始，如果您想默認使用 TypeScript，那么 CRA 會提供一個模板，它是

npx create-react-app <App Name> --template typescript