我想在 Laravel 项目中使用 TypeScript 和 React

Question

我想在 Laravel 项目中使用打字稿并做出反应。 但是，当我执行“nom run dev”时发生了错误。 我知道我必须更改 app.tsx 才能编译它。我应该在哪里修改其他内容？ 我查找以修复以下错误。 TS17004：除非提供了“--jsx”标志，否则无法使用 JSX。 我在我的 laravel 项目中修改了 tsconfig.json。但仍然出现无法使用 JSX 错误。 错误日志如下。

[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(23,21)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

       Asset      Size   Chunks             Chunk Names
/css/app.css   177 KiB  /ts/app  [emitted]  /ts/app
  /ts/app.js  1.06 MiB  /ts/app  [emitted]  /ts/app

ERROR in ./resources/ts/components/Example.tsx 5:16
Module parse failed: Unexpected token (5:16)
File was processed with these loaders:
 * ../../../node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export default class Example extends Component {
|     render() {
>         return (<div className="container">
|                 <div className="row justify-content-center">
|                     <div className="col-md-8">
 @ ./resources/ts/app.tsx 13:0-31
 @ multi ./resources/ts/app.tsx ./resources/sass/app.scss

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(1,8)
      TS1259: Module '"/Users/username/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(2,8)
      TS1192: Module '"/Users/username/node_modules/@types/react-dom/index"' has no default export.

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(7,13)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

TSconfig.js 在下面

{
    "compilerOptions": {
      "outDir": "./built/",
      "sourceMap": true,
      "strict": true,
      "noImplicitReturns": true,
      "noImplicitAny": true,
      "module": "es2015",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "moduleResolution": "node",
      "target": "es6",
      "jsx": "preserve",
      "lib": [
        "es2016",
        "dom"
      ]
    },
    "include": [
      "resources/ts/**/*" // TypeScript
    ]
}

Answer 1

修改您的tsconfig.json 以正确处理jsx

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      // "esnext"
    ],
    // "allowJs": true,
    "skipLibCheck": false,
    "allowSyntheticDefaultImports": true, //you need this
    "strict": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsxdev", // can be (react, react-jsxdev, react-jsx). preserve will not convert jsx and preserve it, you don't need that
    "sourceMap": true,
    "experimentalDecorators": true,
    "baseUrl": "resources/js",
  },
  "include": [
    "resources" // I have my tsx and ts in this directory, modify this as per your needs
  ]
}

可能你还需要相应地配置 babel

将此添加到您的 .babelrc 文件中，如果您没有，请制作一个。

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

确保您已安装适当的软件包：

npm install --save-dev @babel/preset-react ts-loader typescript