I might be missing something basic here, and I'm not really sure what to search for. Can I define an object type where the type of one field depends on the value of another? A helper function would be fine too. Here's some mock code using this as a placeholder for what I want:
type Workflow = {
firstStep: keyof this.steps;
steps: {
component: [key: string]: (props: { value: any, [prop: string]: any }) => ReactNode;
next: keyof this.steps | null;
};
checkIfValid: (stepValues: {
[StepKey in keyof this.steps]: Parameters<this.steps[StepKey]['component']>[0]['value'];
}) => boolean;
};
const wf: Workflow = {
firstStep: 'name', // The first step must be a key in `steps`.
steps: {
// Each step's component needs a `value` prop.
name: {
component({ value }: { value: string }) {
return <input value={value} />;
},
next: 'age', // Must be a `steps` key or `null`.
},
age: {
component({ value }: { value: number }) {
return <input value={value} />;
},
next: null,
},
},
checkIfValid({ name, age }) {
// Here we'd know the `name` is a string and `age` is a number.
return name === 'Admin' && age > 100;
},
}