TS 皮棉错误；类型 X 不可分配给类型“IntrinsicAttributes & RefAttributes<any>”答案

【问题标题】：TS Lint Error; Type X is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'TS 皮棉错误；类型 X 不可分配给类型“IntrinsicAttributes & RefAttributes<any>”
【发布时间】：2020-06-21 06:33:29
【问题描述】：

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

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

我这两天一直在寻找解决方案。我认为我的 tsconfig.json 或我的 webpack 中可能有一些问题 - 两者都可以在底部的 GitHub 演示库中找到。

示例 1：

假设我有这个组件：

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

上述组件的错误会抱怨 children 道具： 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 Example Repo：想自己运行代码吗？

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

如何避免这些错误？当我使用 Create React App TS bundler 时，我没有收到这些错误。我只是想传递一些简单的道具！！

【问题讨论】：

标签： javascript reactjs typescript

【解决方案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）。

【讨论】：

>"ES6" 和 "ES2015" 值可用于定位“ES5”或更低版本。正如我提到的文档中所引用的那样。
tsconfig.json 上的那个文档很有用，我一般只用手册里的 tsconfig.json 文档，信息量少很多。我最初写了一个回答说同样的事情（“模块”：“commonJS”），因为这就是我所有的 tsconfig.json 的样子，但是我意识到 OP 实际上可能想要使用“ES6”。输出（来自 TypeScript）会略有不同（一个发出代码为export function test，另一个发出代码为export.test = function）。
谢谢你们！实际上，我确实恢复到module: "commonJS"，因为我真的不需要 ES6 选项，但我选择这个答案是为了更好地解释。但是，我确实很欣赏另一个答案中留下的链接，并且我审查了每个链接。我学到了很多东西，希望这个帖子将来能帮助其他人。

【解决方案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

【讨论】：