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认为我同时使用两者(在运行时它会爆炸)。我如何分离这些类型定义，以便正确的文件对正确的文件可见？

从概念上讲，我想我只是希望 devDependencies 中的 @types 只对开发脚本可见，例如 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 环境(用于构建):

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

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

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