TS2345 类型参数不可分配给类型参数：使用在另一个模块中声明的一个模块

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;

然后我有使用 webpack-merge 的单独的 prod 和 dev Webpack 文件。这里是 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';

这样做，我现在从 webpack.dev.ts:

中的 merge 方法内部得到一个不同的错误

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'.

在 VS Code 中将鼠标悬停在 merge 上，这是我得到的类型信息：

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

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

Answer 1

扩展 webpack Configuration 的 TypeScript 类型以定义 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 测试。

参考文献：

TS2345 类型参数不可分配给类型参数：使用在另一个模块中声明的一个模块

TS2345 Argument of type is not assignable to parameter of type: using one module that's declared in another module

typescript

webpack

webpack-dev-server

typescript-typings

webpack-merge