node.js - 如何在项目中分离出@types？

Question

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

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

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

然后我按照 this article 将 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.ts 中，我应该引用 @types/node 而不是 @types/react，并且在我的 >src/components/app.tsx 文件我应该引用 @types/react 而不是 @types/node，但在这两个地方都引用了编译器和 IDE我想我两者都用(在运行时它会爆炸)。如何分离这些类型定义，以便正确的文件对正确的类型可见？

从概念上讲，我想我只是希望 devDependency 中的 @types 仅对开发脚本可见，例如 webpack.config.ts，并且 src 中的文件只能看到 dependency 中的 @types。这样的设置可能吗？

Answer 1

您应该能够使用两个单独的 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"]
    }
}