如何在项目中分离出@types？

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

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

我有一个典型的webpack.config.js来构build项目。 一切运作良好。

然后，我将.js webpack.config.js转换为.ts 文件 。

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

事实上， webpack.config.ts很好。

然而，node / webpack和react之间的typedef被看作是在同一个空间（即local和web）。 例如在我的webpack.config.ts我应该引用@types/node而不是@types/react ，并且在我的src/components/app.tsx文件中，我应该引用@types/react而不是@types/node ，但是在这两个地方，编译器和IDE都认为我都使用（在运行时它会炸掉）。 我怎样才能分开这些types的定义，以便正确的文件可见？

从概念上讲，我想我只是想从devDependencies只能看到开发脚本，如webpack.config.ts ，和src文件只能看到从dependencies @types 。 这种设置可能吗？

Answer 1

你应该可以用两个单独的tsconfig.json文件来完成这个工作，例如：

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

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

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

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

 { "compilerOptions": { "lib": ["es2015", "dom"], "types": ["react"] } }