Как выделить @types внутри проекта?

Question

У меня был проект TypeScript, который использует React и Webpack:

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 после этой статьи:

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

В самом деле, webpack.config.ts работает отлично.

Тем не менее, typedefs между узлом / веб-пакетом и реакцией видны как в одном и том же пространстве (т. Е. Как локально, так и в сети). Например в моем webpack.config.ts Я должен ссылаться @types/node и не @types/reactи по моему src/components/app.tsx файл, на который я должен ссылаться @types/react и не @types/node, но в обоих местах компилятор и IDE думают, что я использую оба (во время выполнения это взорвется). Как я могу отделить эти определения типов, чтобы правильные файлы были видны правильным файлам?

Концептуально, я думаю, я просто хочу @types от devDependencies быть видимым только для сценариев разработчиков, например 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"]
    }
}