如何在项目中分离出@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来构建项目。一切正常。

然后我将 webpack.config.js 从 .js 转换为 .ts this article:

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

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

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

从概念上讲，我想我只想让 devDependencies 中的 @types 只对开发脚本可见，例如 webpack.config.ts，而 src 中的文件只能看到 @types 来自 dependencies。这样的设置可行吗？

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

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

How to separate out @types within project?

node.js

npm

typescript

webpack

ts-node