Javascript TS林特误差；类型X不可分配给类型'；内在的颂词；重新描述<；任何>'；

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

类型X不可分配给类型“intrinsitattributes&RefAttributes”

我已经找了两天的解决方案了。我想我的tsconfig.json或我的网页包中可能有问题-这两个都可以在底部的GitHub演示repo中找到

示例1:

假设我有这个组件：

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

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

Github示例Repo:wanna自己运行代码吗

git克隆https://github.com/TJBlackman/demo-tslint-error.git

cd-demo-tslint错误

npm安装

npm运行开发人员

---

如何避免这些错误？当我使用CreateReact应用程序TS捆绑程序时，我没有收到这些错误。我只想传递一些简单的道具

在您的tsconfig.json中使用：

"moduleResolution": "node"

问题在于使用

“模块”：“es6”

似乎会导致模块解析策略更改为经典。这很烦人，因为在中没有统一提到（他们指定这种情况发生在

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
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

{
  "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"]
}

---

我还创建了一个pull请求来应用此更改：（我是github上的SliftList。

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

使用

模块：“commonJS”

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

---

>当目标为“ES5”或更低时，可使用“ES6”和“ES2015”值。正如我提到的文档中所引用的，关于tsconfig.json的文档非常有用，我通常只使用手册中的tsconfig.json文档，它的信息要少得多。我最初写了一个回答，说的是相同的东西（“模块”：“commonJS”），因为这就是我所有tsconfig.json的样子，但是我意识到OP可能实际上想要使用“ES6”。输出（来自TypeScript）将稍有不同（一个使用

export function test

发出代码，另一个使用

export.test=function

发出代码）。谢谢！实际上，我确实回到了

模块：“commonJS”

，因为我并不真的需要ES6选项，但我选择这个答案是为了更好的解释。不过，我很欣赏另一个答案中留下的链接，我对其中的每一个都进行了回顾。我学到了很多，希望这条线能在将来帮助别人。