TypeScript重构set函数：支持单/多键值对更新Vue组件modelValue

问题核心 #

原set()函数每次调用都基于原始props.modelValue生成新对象，连续两次调用会导致第一次的修改被覆盖（因为第二次还是从原始值扩展）。你的重构尝试传入数组后直接展开，会把数组索引作为键，无法正确合并目标键值对。

可行解决方案 #

重构set()函数，使其同时支持单个键值更新和批量键值更新，且保证类型安全：

1. 定义复用类型（可选但推荐） #

先提取配置键和值的类型，方便后续维护：

type ConfigKey = 'type' | 'color' | 'stroke' | 'isDarkMode' | 'randomColor';
type ConfigValue = string | boolean;

2. 重构set()函数 #

使用TypeScript函数重载实现双模式支持：

const emit = defineEmits(['update:modelValue']);

// 函数重载声明
function set(prop: ConfigKey, value: ConfigValue): void;
function set(updates: Partial<Record<ConfigKey, ConfigValue>>): void;

// 函数实现
function set(arg1: ConfigKey | Partial<Record<ConfigKey, ConfigValue>>, arg2?: ConfigValue) {
  let updates: Partial<Record<ConfigKey, ConfigValue>> = {};
  
  if (typeof arg1 === 'string') {
    // 单个键值更新模式
    updates[arg1] = arg2!;
  } else {
    // 批量更新模式
    updates = arg1;
  }
  
  // 合并原始值与更新项，触发事件
  emit('update:modelValue', { ...props.modelValue, ...updates });
}

3. 修改批量更新的调用方式 #

直接传入键值对对象即可，无需数组：

function setRandomColor() {
  const randomColor = getRandomColor();
  set({ color: randomColor, randomColor: true });
}

function setColor(c: string) {
  set({ color: c, randomColor: false });
}

4. 兼容原有单个调用 #

原有的单个键值调用无需修改，比如：

// 依然可以正常使用
set('type', 'print');
set('isDarkMode', true);

为什么你的重构尝试失败？ #

你传入的是包含prop和value的对象数组，直接展开数组到对象中时，JavaScript会把数组的**索引（0、1）**作为键，生成的对象结构是：

{
  ...props.modelValue,
  0: { prop: 'color', value: '#xxx' },
  1: { prop: 'randomColor', value: true }
}

这显然不是你需要的键值对结构，因此无法正确更新modelValue。

内容的提问来源于stack exchange，提问作者LovelyAndy