TypeScript优化Task对象数组属性处理逻辑的疑问与方案咨询

问题场景 #

在Vue项目中使用TypeScript，通过ref定义了类型为Task的响应式对象，在handleSubmit方法里需要重复调用removeTemporaryIdFromArray函数，处理task.value的materials、questions、roles、tables四个数组属性。尝试用forEach简化时，类型断言方案不规范，存在类型匹配问题，需要更合规的TypeScript解决方案。

原重复代码：

function handleSubmit() {
    task.value.materials = removeTemporaryIdFromArray<TaskMaterial>(task.value.materials);
    task.value.questions = removeTemporaryIdFromArray<TaskQuestion>(task.value.questions);
    task.value.roles = removeTemporaryIdFromArray<TaskRole>(task.value.roles);
    task.value.tables = removeTemporaryIdFromArray<TaskTable>(task.value.tables);
}

自行尝试的不规范简化代码：

(['materials', 'questions', 'roles', 'tables'] as (keyof typeof task.value)[]).forEach((key) => {
      task.value[key] = removeTemporaryIdFromArray<typeof key>(task.value[key] as TaskMaterial[]) as undefined;
    });

优化方案 #

1. 优化工具函数的类型定义 #

让removeTemporaryIdFromArray更通用，支持所有继承CommonEntity的类型数组，同时明确返回值类型，避免类型模糊：

export function removeTemporaryIdFromArray<T extends CommonEntity>(
  entity: T[] | undefined
) {
  if (entity) {
    return entity
      .filter((item) => !item.delete || !item.isTemporaryIdAdded)
      .map((item) => Object.assign({}, removeTemporaryId<T>(item)));
  }
  // 明确返回undefined，保证类型匹配
  return undefined;
}

2. 类型安全的forEach简化实现 #

通过精准类型约束定义需要处理的属性键数组，让TypeScript自动推导类型，无需冗余断言：

function handleSubmit() {
  // 限定数组元素为Task中对应CommonEntity数组类型的属性键
  const fieldsToProcess: Array<keyof Pick<Task, 'materials' | 'questions' | 'roles' | 'tables'>> = [
    'materials', 'questions', 'roles', 'tables'
  ];

  fieldsToProcess.forEach(key => {
    // TypeScript可自动推导属性类型，直接调用工具函数赋值
    task.value[key] = removeTemporaryIdFromArray(task.value[key]);
  });
}

方案说明 #

• 精准类型约束：使用Pick<Task, ...>提取目标属性键，确保数组中仅包含符合要求的属性，避免传入错误键导致类型错误。
• 工具函数通用化：修改泛型约束后，工具函数可支持所有继承CommonEntity的类型数组，复用性更强。
• 无冗余断言：TypeScript自动推导每个属性的类型，无需手动强制断言，在简化代码的同时保证类型安全。

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