我有一个复杂的问题,我不确定如何最好地用打字稿编码。或者我让它变得复杂。我试图避免为下面的每个接口创建一个类(在我试图解决的问题中还有很多(大约 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 元素相同,但只有字段不同。