如何根据几个字段值查找接口类型,然后能够使用该接口的字段列表创建对象

问题描述 投票:0回答:0

我有一个复杂的问题,我不确定如何最好地用打字稿编码。或者我让它变得复杂。我试图避免为下面的每个接口创建一个类(在我试图解决的问题中还有很多(大约 6 个工作流程和 4 个步骤))。我完全愿意一个更好的方法来做到这一点。 问题是:我有几个工作流程,每个工作流程都有几个步骤,每个步骤使用不同的字段。让我们用接口和类型将其概念化如下,以便更清楚。

文件名:workflowType.ts

export interface FirstStepWorkflowA {
  type: 'workflowA',
  step: 'first',
  name: string,
  description: string,
  price: number
}

export interface SecondStepWorkflowA {
  type: 'workflowA'
  step: 'second',
  name: string;
  price: number
  taxes: number;
  finalPrice: number;
}

export interface FirstStepWorkflowB {
   type: 'workflowB',
   step: 'first',
   name: string,
   components: string[],
   prices: number[]
}

export interface SecondStepWorkflowB {
   type: 'workflowB',
   step: 'second',
   name: string,
   prices: number[],
   totalPrice: number
}
export type FirstStep = FirstStepWorkflowA | FirstStepWorkflowB;
export type SecondStep = SecondStepWorkflowA | SecondStepWorkflowB;
export type WorkflowType = FirstStep | SecondStep;

export getFieldList = (workflow: WorkflowType): Array<string> => {
   let fieldArray: Array<string>;
   if (workflow.step === 'first') && (workflow.type === 'workflowA') {
       fieldArray = Array<keyof FirstStepWorkflowA>();
   } else if (workflow.step === 'second') && (workflow.type === 'workflowA') {
       fieldArray = Array<keyof SecondStepWorkflowA>();
   } else if... and so forth

   return fieldArray;
}

export getWorkflowObject(workflow: string, step: string): WorkflowType => {
   let workflowType: WorkflowType;
   ?
   return workflowType;
}

现在我希望能够根据界面定义的字段列表从 UI 记录字段值,并将该对象存储在 WorkflowRequest 类中。 还有一个 RequestList 类,它存储一个有序的 WorkflowRequest 列表 WorkflowRequest 类会将这些 workflowStep 对象作为成员。

import { workflowType } from 'workflowType';
export default class WorkflowRequest {
   private workflowType: string;
   private workflowFirstStep: FirstStep;
   private workflowSecondStep: SecondStep;
   constructor(workflowType: string) {this.workflowType = workflowType}
   public setWorkflowFirstStep(firstStep: WorkflowFirstStep) {
      this.workflowFirstStep = firstStep;
   }
} 

然后我会存储值

    public saveFirstStepInfo(workflow: string, step: string): void {
        cy.get('div.details').within( () => {
            const workflowRequest = new WorkflowRequest(workflow);
            let workflowType: WorkflowType = getWorkflowObject(workflow, step);
            const fields: Array<string> = getFieldArray(workflowType);
            // Starting at 2 because field 0 is workflow and field 1 is step.
            let i = 2;
            cy.get('div').each(requestLine => {
                const value = requestLine.find('span:not(.label)').text();
                workflowType.fields[i] = value ;
                i++;
            });
            
            workflowRequest.setWorkflowFirstStep(workflowType);
        });
    }

换句话说,我想避免必须为每个工作流使用特定的方法来存储 UI 值,因为 UI 元素相同,但只有字段不同。

typescript types interface
© www.soinside.com 2019 - 2024. All rights reserved.