如何创建包含React组件的TypeScript模块

Question

我已经使用未插入的create-react-app和react-scripts创建了React应用程序。当我将模块导入我的React应用程序时，我得到以下警告：

./node_modules/@myscope/webcomponents/dist/components/Mock.d.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| import React, { CSSProperties } from "react";
> export interface IMockProps {
|     children?: React.ReactNode;
|     color: {

在导入之前，我正在使用tsc将JS编译为TypeScript，并且已经

  "main": "dist/index.js",
  "types": "dist/index.d.ts",

在模块的package.json中指定。 VS Code使用模块中的键入似乎没有任何问题，但是react-scripts start似乎无法读取我的键入，导致export或declare失败。

如何编译包含React组件/ JSX的TypeScript模块，该模块可以由react-scripts使用的编译器导入？ react-scripts start与其他TypeScript模块没有问题，并且我无法区分工作的公共TypeScript模块和失败的自定义TypeScript模块之间的任何区别。

反应应用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": "preserve"
  },
  "include": [
    "src"
  ]
}

模块tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "rootDir": "src",
    "outDir": "dist",
    "declaration": true
  },
  "exclude": [
    "dist",
    "test"
  ]
}