Question

我正在使用webpack开发一个React和TypeScript应用程序，并且我的每个React组件都遇到了完全相同的错误。错误始终是这样：

Type X is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

我一直在寻找解决方案已有2天了。我认为tsconfig.json或webpack中可能存在某些问题-两者都位于底部的GitHub演示存储区中。

示例1：

说我有这个组件：

export const Container = ({children}) => {
  return (
    <Container>
      {children}
    </Container>
  );
}

上述组件的错误将抱怨儿童道具： TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.

示例2

说我有这个组件：

export const Title = ({text, color}) => {
  return (
    <h1 style={{color: color}}>{text}</h1>
  );
}

然后错误提示这两个道具： TS2322: Type '{ text: string; color: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "lib": ["es6", "dom"],
    "noImplicitThis": true,
    "strictNullChecks": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Github示例存储库：Wannna自己运行代码？

git clone https://github.com/TJBlackman/demo-tslint-error.git
cd demo-tslint-error
npm install
npm run dev

如何避免这些错误？使用Create React App TS捆绑程序时，没有出现这些错误。我只想传递一些简单的道具！

Answer 1

在您的 tsconfig.json 中使用：

"moduleResolution": "node"

问题在于使用"module": "es6"似乎导致模块解析策略变为经典。这很烦人，因为documentation中没有统一提及（他们将这种情况指定为AMD | System | ES2015，而不是es6）。

为了避免出现问题，我建议手动指定模块解析策略：

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "lib": ["es6", "dom"],
    "noImplicitThis": true,
    "strictNullChecks": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    // Explicitly force module resolution strategy to be node,
    //  to prevent "module": "es6" from changing it to classic.
    "moduleResolution": "node"
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

我还创建了一个拉取请求以应用此更改：https://github.com/TJBlackman/demo-tslint-error/pull/1/commits/634ec9889096baca0676ddf3076c66e82addfdd8（我在github上是sliftist）。

Answer 2

有关更多信息，请阅读这些文档

Doc on what Module does

Doc on Module options and values allowed

Doc on webpack react basic config

使用module:"commonJS"

要进行编译，我们必须在命令行上指定模块目标。对于 Node.js，使用--module commonjs;对于require.js，请使用--module amd

TS棉绒错误；类型X不能分配给类型'IntrinsicAttributes＆RefAttributes <any>'

2 个答案: