typescript - TS2345 类型参数不可分配给类型 : using one module that's declared in another module 的参数

Question

我一直在尝试使用 Webpack、webpack-merge 和使用 TypeScript 分离开发​​ Webpack 文件来解决问题，并且我有点意识到我需要声明一个从 传递的类型别名函数。 webpack.common.ts 文件到 webpack.dev.ts 文件。

这就是我最初尝试做的事情。我有一个 webpack.common.ts 在基本配置中加载的文件:

import { Configuration } from 'webpack';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const common: Configuration = {
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.ts(x?)$/,
        use: [{ loader: 'ts-loader' }],
      },
      {
        enforce: 'pre',
        loader: 'source-map-loader',
        test: /\.js$/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    plugins: [new TsconfigPathsPlugin({})],
  },
};

export default common;

然后我有单独的 prod 和 dev Webpack 文件，它们使用 webpack-merge。这是 webpack.dev.ts :

import { Configuration } from 'webpack';
import common from './webpack.common';
import path from 'path';

const __dirname = path.resolve();

const dev: Configuration = merge(common, {
  devServer: {
    compress: true,
    contentBase: path.join(__dirname, 'dist/dev'),
    historyApiFallback: true,
    hot: true,
    open: true,
    port: 9000,
  },
  devtool: 'source-map',
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
  },
  mode: 'development',
});

export default dev;

这会导致 merge 内部出现错误方法:

Argument of type 'import(".../node_modules/@types/webpack/index").Configuration' is not assignable to parameter of type 'import(".../node_modules/@types/webpack-merge/node_modules/@types/webpack/index").Configuration'.

基于此，看起来 webpack-merge 有自己的 Webpack 类型，而 Webpack 和 webpack-merge 使用两个不同的 Configuration类型。

我尝试更新 webpack-merge 类型，以便它导入 Webpack 的类型而不是它自己的类型。

在 webpack-merge 中 index.d.ts 文件:

// import { Configuration } from 'webpack'; 
import { Configuration } from '../webpack';

这样做，我现在从 merge 内部得到一个不同的错误。 中的方法webpack.dev.ts :

Argument of type '{ devServer: { compress: boolean; contentBase: string; historyApiFallback: boolean; hot: boolean; open: boolean; port: number; }; devtool: "source-map"; externals: { 'react': string; 'react-dom': string; }; mode: "development"; }' is not assignable to parameter of type 'Configuration'.

悬停在 merge在 VS Code 中，这是我获得的类型信息:

(alias) merge(...configs: Configuration[]): Configuration

我应该更新 webpack-merge 的导入路径，以便它使用相同的类型声明吗？我该如何更新 merge键入以接受这些 webpack-dev-server 类型(无需使用 any)？

Answer 1

为 webpack 扩展 TypeScript 类型 Configuration定义 devServer如 this DefinitelyTypes issue response by uipoet 中推荐的那样(并在此处转录)为我工作。

import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

export const configuration: Configuration = {
  ...
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000
    ...
  }
  ...
}

用 @types/webpack 测试5.28.0 和 @types/webpack-dev-server 3.11.4.
引用:

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/27570

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43232