如何基于字段值判断TypeScript接口类型并创建对应对象

核心思路 #

通过TypeScript的类型映射和泛型，把工作流类型与对应步骤接口做绑定，再借助Object.assign实现UI字段到目标对象的动态赋值，完全不用为每个接口创建类，也不用写重复的存储方法。

具体实现步骤 #

1. 定义基础类型与接口

先把所有工作流的步骤接口、工作流类型联合类型定义好，再建立类型映射关系：

// 各工作流第一步的接口定义
interface FirstStepWorkflowA {
  name: string;
  age: number;
}

interface FirstStepWorkflowB {
  projectId: string;
  teamSize: number;
}

// 工作流类型的联合类型
type WorkflowType = 'WorkflowA' | 'WorkflowB';

// 关键：建立工作流类型到对应步骤接口的映射
type WorkflowStepMapping = {
  WorkflowA: FirstStepWorkflowA;
  WorkflowB: FirstStepWorkflowB;
};

2. 改造WorkflowRequest类

让类内部的成员变量支持存储不同工作流的步骤数据，同时实现通用的存储方法：

class WorkflowRequest {
  // 用Partial+Record来存储各工作流的步骤数据，初始为空对象
  private workflowStepData: Partial<Record<WorkflowType, WorkflowStepMapping[WorkflowType]>> = {};

  // 通用的第一步存储方法，泛型T约束为WorkflowType，确保类型安全
  saveFirstStepInfo<T extends WorkflowType>(
    workflowType: T,
    uiInput: Partial<WorkflowStepMapping[T]>
  ): void {
    // 先初始化对应工作流的步骤数据（避免undefined）
    if (!this.workflowStepData[workflowType]) {
      this.workflowStepData[workflowType] = {} as WorkflowStepMapping[T];
    }
    // 把UI传入的字段合并到目标对象里
    Object.assign(this.workflowStepData[workflowType], uiInput);
  }

  // 可选：获取指定工作流的第一步数据
  getFirstStepData<T extends WorkflowType>(workflowType: T): WorkflowStepMapping[T] | undefined {
    return this.workflowStepData[workflowType];
  }
}

3. 使用示例

调用通用方法时，TypeScript会自动根据传入的workflowType校验UI输入的字段是否符合对应接口：

const request = new WorkflowRequest();

// 存储WorkflowA的第一步数据
request.saveFirstStepInfo('WorkflowA', { name: 'Isabelle', age: 28 });
// 存储WorkflowB的第一步数据
request.saveFirstStepInfo('WorkflowB', { projectId: 'TS-DEV-001', teamSize: 5 });

// 获取数据
console.log(request.getFirstStepData('WorkflowA')); // { name: 'Isabelle', age: 28 }
console.log(request.getFirstStepData('WorkflowB')); // { projectId: 'TS-DEV-001', teamSize: 5 }

额外优化点 #

• 如果需要强制UI输入包含接口的必填字段，可以把Partial<WorkflowStepMapping[T]>改成原接口类型，要求传入完整数据。
• 可以在saveFirstStepInfo里加字段校验逻辑，比如判断必填字段是否存在，避免空值流入。

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