reactjs - 将接口(interface)传递给 React 类组件时，意外 token "<"预期为 "{"

Question

在我的 Laravel 8/Babel/Mix/React/TypeScript 环境中遇到一个问题，其中常规 React 类组件产生编译错误，因为我已经将项目迁移到 TypeScript 并开始传递一个空的 Prop 和简单状态组件的接口(interface)。

我试过传递空的 JSON 对象，注释掉各种导入语句，将 export default 调用移到函数下方，但到目前为止还没有成功。

编译错误:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../MyComponent.tsx: Unexpected token, expected "{" (10:54)

   8 | import { IState } from '../interfaces';
   9 |
> 10 | export default class MyComponent extends React.Component<{}, IState> {
     |                                                         ^
  11 |
  12 |     constructor(props:any) {
  13 |       super(props);
    at Object._raise (/Users/.../node_modules/@babel/parser/lib/index.js:796:17)

MyComponent.jsx 片段:

import { IState } from '../interfaces';

export default class MyComponent extends React.Component<{}, IState> {

    constructor(props:any) {
      super(props);
      this.state = dummyData;
    }
    ...

简化的interfaces.ts:

export interface IState {
    tasks: {
        [key: string]: ITask
      };
    columns: {
        [key: string]: IColumn
    };
    columnOrder: string[];
}

webpack.mix.js

const mix = require('laravel-mix');

require('laravel-mix-purgecss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.ts', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')(),
    ])
    .setResourceRoot("/") // This allows easy resource linking from React components
    .purgeCss({
        //enabled: mix.inProduction(),
        enabled: true,
        folders: ['resources', 'app'],
        extensions: ['html', 'js', 'ts', 'tsx', 'php', 'vue'],
    });

mix.extend('customAdditions', function(webpackConfig, ...args) {
    webpackConfig.resolve.extensions.push('.ts', '.tsx');
});

mix.customAdditions();

.babelrc

{
    "plugins": ["transform-class-properties"],
    "presets": [["@babel/preset-env", {"modules": false}],
    "@babel/preset-react"]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs", 
    "lib": ["dom", "es2017"],   
    "jsx": "react",      
    "strict": true, 
    "noImplicitAny": true,   
    "moduleResolution": "node",  
    "esModuleInterop": true,   
    "skipLibCheck": true,    
    "forceConsistentCasingInFileNames": true ,
    "watch": true,
  }
}

更新 1:其他尝试无效:

• 逐步将 React 版本(在包版本号更改之间运行 yarn)降级到 16.14.0
• 在那之后没有用，将 @types/react 和 @types/react-dom 降级到最新版本 16 以匹配降级的 react 包
• 运行这个焦土命令:watchman watch-del-all && rm -f yarn.lock && rm -rf node_modules && yarn && yarn cache clean && yarn dev

Answer 1

明白了:需要将我的 .babelrc 中的 @babel/preset-react 换成 @babel/preset-typescript，之后使用 yarn add @babel/preset-typescript --dev 添加这些预设。大声喊叫Leon Gaban's answer为我指明那个方向🙌

新的.babelrc:

{
    "plugins": ["transform-class-properties"],
    "presets": [
        ["@babel/preset-env", {"modules": false}],
        "@babel/preset-typescript" // <--
    ]
}

如果有人在类组件之前声明接口(interface)时遇到错误 interface is a reserved word...，这也可以解决此问题。