React Typescript 组件意外标记，预期为“{”

Question

我有一个打字稿中的 React 应用程序，由于未知原因无法编译。这是我得到的错误：

./src/App.tsx
SyntaxError: C:\Users\LANAUS\repos\gdn-tabular-app\src\src\App.tsx: Unexpected token, expected "{" (12:34)

  10 | 
  11 | // Web socket client connection
> 12 | export class App extends Component<any, any> {
     |                                   ^
  13 |     index = 0
  14 |     connections: httpLib.ClientRequest[];
  15 |     tlm: AxiosInstance;

我不明白为什么 class 定义中的似乎有问题。据我所知，它似乎正在将 JS 规则应用于我的 TSX 文件。作为测试，当我删除时，错误变为：

./src/App.tsx
SyntaxError: C:\Users\LANAUS\repos\gdn-tabular-app\src\src\App.tsx: Unexpected token (14:15)

  12 | export class App extends Component {
  13 |     index = 0
> 14 |     connections: httpLib.ClientRequest[];

我完全不知所措，有人知道为什么编译失败吗？

其他相关文件：

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic"
            },
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "suppressImplicitAnyIndexErrors": true
  },
  "include": [
    "src"
  ]
}

Answer 1

别听过去的我说，过去我已经解决这个问题 2 周了，无法理清思路。 Felix Kling 说得对，我需要在我的 .babelrc.

中预设 babel (@babel/preset-typescript)

它似乎在 Files successfully emitted, waiting for typecheck results... 消息上冻结的原因是因为该应用程序是运行，如果我检查了我的浏览器，我就会看到该应用程序。我所做的一定是抑制了我通常在这条消息后看到的警告。

React Typescript 组件意外标记，预期为“{”

React Typescript Component Unexpected token, expected "{"

javascript

compiler-errors

node.js

typescript

reactjs