2

我有一个使用 React 和 Webpack 的 TypeScript 项目：

npm install react react-dom @types/react @types/react-dom --save
npm install webpack ts-loader --save-dev

我有一个典型webpack.config.js的构建项目。一切正常。

然后我转换webpack.config.js为.js关注.ts这篇文章：

npm install ts-node @types/node @types/webpack --save-dev

确实，webpack.config.ts效果很好。

然而，node/webpack 和 react 之间的 typedef 被视为在同一个空间中（即本地和 web）。例如，在我的webpack.config.tsI 应该引用@types/node而不是@types/react，在我的src/components/app.tsx文件中我应该引用@types/react而不是@types/node，但是在这两个地方编译器和 IDE 都认为我同时使用两者（在运行时它会爆炸）。如何分离这些类型定义，以便正确的文件对正确的文件可见？

从概念上讲，我想我只想@typesfromdevDependencies只对开发脚本可见，比如webpack.config.ts，并且文件src只能@types从dependencies. 这样的设置可以吗？

4

1 回答 1

2

您应该能够使用两个单独的tsconfig.json文件来执行此操作，例如：

 /webpack.config.ts
 /tsconfig.json
 /src/components/app.tsx
 /src/tsconfig.json

然后，您/tsconfig.json特定于 Node 环境（用于构建）：

{
    "compilerOptions": {
        "lib": ["es2015"], // no DOM
        "types": ["node"]
    }
}

然后/src/tsconfig.json是浏览器环境：

{
    "compilerOptions": {
        "lib": ["es2015", "dom"],
        "types": ["react"]
    }
}
于 2017-12-05T20:14:19.270 回答