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都认为我同时使用它们（在运行时它会爆炸）。如何分离这些类型定义，以便正确的文件可以看到正确的类型定义？

从概念上讲，我认为我只希望来自@types的{{1}}仅对隐私脚本可见，例如devDependencies，webpack.config.ts中的文件只能看到{{1}来自src。这样的设置可能吗？

Answer 1

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

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

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

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

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

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

如何在项目中分离@types？

1 个答案: