即使在tsconfig.json中排除了導入的react node_module中的Typescript編譯錯誤

Question

我一直在玩得很開心，嘗試看看是否無法讓我的打字稿構建忽略node_modules（特別是React）。 我的tsconfig.json告訴它忽略該文件夾，但是它仍在編譯中，我不確定為什么。 我懷疑可能是因為它是由包含文件中的文件導入的，也許嗎？

這是錯誤的示例，其中有很多：

ERROR in /Users/rw3iss/Sites/site/src/project/public/node_modules/@types/react/index.d.ts
(3606,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feTile' must be of type 'SVGProps<SVGFETileElement>', but here has type 'SVGProps<SVGFETileElement>'.

我的tsconfig.json看起來像這樣：

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "outDir": "build",
    "noResolve": false,
    "moduleResolution": "node",
    "typeRoots": [
      "./node_modules/@types",
      "./secure/node_modules/@types",
      "./public/node_modules/@types"
    ],
    "types": [ "react" ]
  },
  "filesGlob": [
  ],
  "include": [
    "secure/src/**/*",
    "public/react_src/**/*"
  ],
  "exclude": [
    "node_modules/**/*",
    "public/node_modules/**/*",
    "secure/node_modules/**/*",
    "public/dist"
  ],
  "types": [ "react" ]
}

我正在嘗試使用webpack / ts-loader進行編譯，而我的webpack配置為：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {

    entry: {
        app: [
            APP_DIR + '/react_src/Secure.tsx',
            APP_DIR + '/react_src/DicomViewer.tsx'
        ]
    },

    output: {
        publicPath: '/',
        path: BUILD_DIR, // 'dist'
        filename: '[name].js', // 'index.js'
        //libraryTarget: 'umd'
    },

    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        modules: [ 'node_modules', 'src' ]
    },

    module: {
        rules: [
            { 
                test: /\.(t|j)sx?$/, 
                include: APP_DIR,
                exclude: [
                        path.resolve(__dirname, 'node_modules'),
                        '../public/node_modules',
                        '../node_modules'
                    ],
                loader: ['ts-loader']
            }
        ]
    }
};

module.exports = config;

誰能告訴我為什么會發生這些錯誤，以及如何避免這些錯誤以及其他可能在導入的node_modules中彈出的錯誤？

更新：我刪除了'typeRoots'下的所有內容，並將'types'設置為[]：

"typeRoots": [],
"types": []

但是它仍然拋出相同的錯誤。 我只是想了解為什么...

Answer 1

我無法讓我的打字稿構建忽略node_modules（特別是React）。 我的tsconfig.json告訴它忽略該文件夾，但是它仍在編譯中，我不確定為什么。

該錯誤與@types目錄中的react類型聲明有關。 即使我們排除node_modules ，編譯中也包含@types目錄。

這是來自docs的更多相關信息 ：

默認情況下，所有可見的“ @types”軟件包都包含在您的編譯中...如果指定了typesRoots，則僅包括typeRoots下的軟件包...如果指定了type，則僅包括列出的軟件包。

您的tsconfig包含一個types屬性，該屬性指定[ "react" ] 。 將types屬性更改為空數組[]可能會解決該錯誤。 需要注意的是types下屬於compilerOptions不是在頂層。

另請參閱https://github.com/Microsoft/TypeScript/issues/11257