TypeScript合并对象类型时如何解决类型赋值错误？

问题原因 #

你遇到的类型错误核心是：IConfiguration与IproductionConfig类型不匹配。webpack-merge的merge函数会根据传入参数推断返回值类型，但Configuration是IConfiguration类型（仅包含必填的devServer），而你要求最终返回IproductionConfig（必须包含entry），TypeScript认为合并后的结果可能缺失entry属性，因此抛出错误。

下面是几种可行的解决办法：

方法1：调整类型定义，让开发配置类型成为生产配置的子集 #

修改类型文件，让IConfiguration明确是生产配置的子集，确保合并时类型兼容：

// types.ts
export interface IproductionConfig {
  entry: {
    main: string[];
  };
  devServer?: {
    port: number;
    historyApiFallback: boolean;
  };
}

// 定义开发配置类型：移除entry，同时将devServer设为必填
export type IConfiguration = Omit<IproductionConfig, 'entry'> & {
  devServer: Required<IproductionConfig['devServer']>;
};

这种方式让类型定义更清晰，后续维护时能明确开发配置的结构要求。

方法2：给merge函数显式指定返回类型 #

无需修改类型定义，直接在调用merge时告诉TypeScript合并结果符合IproductionConfig：

// webpack配置文件中的开发模式分支
if (mode === 'development') {
  return merge<IproductionConfig>(product, Configuration);
}

因为product已经包含必填的entry，Configuration仅补充devServer，合并结果必然符合IproductionConfig，显式指定类型即可绕过TypeScript的严格推断。

方法3：修改开发配置的类型标注 #

直接调整开发配置的类型，使其与生产配置兼容：

// dev.config.ts
import { IproductionConfig } from './types';

export const Configuration: Omit<IproductionConfig, 'entry'> & {
  devServer: Required<IproductionConfig['devServer']>
} = {
  devServer: {
    port: 3000,
    historyApiFallback: true,
  },
};

这种方式和方法1逻辑类似，只是将类型约束直接写在开发配置上，无需单独定义IConfiguration。

内容的提问来源于stack exchange，提问作者Екатерина