I have a unique data structure that includes different types and subtypes:
type TypeOne = {
type: 'type-one',
uniqueKey1111: 1,
};
type TypeTwo = {
type: 'type-two',
uniqueKey2222: 2,
}
type FirstType = {
type: 'first',
details: TypeOne | TypeTwo
}
type SubTypeOne = {
type: 'sub-type-one',
uniqueKey3: 3,
};
type SubTypeTwo = {
type: 'sub-type-two'
};
type SecondType = {
type: 'second',
details: SubTypeOne | SubTypeTwo,
}
type DataStructure = FirstType | SecondType;
The data has main types and respective subtypes, where selecting a main type restricts the subtype selection,
On my page, I have two dropdown selects - one for choosing the main type and another for selecting the subtype based on the selected main type.
I am trying to validate these select options:
To help with this, I have a generic method that converts the DataStructure type to SelectOption format:
type SelectOption<T> = { name: string, value: T };
I am unsure how to validate additional options whose values depend on the main select options
type SelectOptions = {
main: SelectOption<DataStructure['type']>[],
additional: SelectOption<DataStructure['details']['type']>[];
}
const options : SelectOptions = {
main: [{name: 'name', value: 'first'}],
additional: [{name: '', value: 'second-two'}],
}
The current options contain invalid data, and TypeScript does not check if additionalOptions contain incompatible options with the main.
It seems like the current SelectOptions structure cannot handle this validation.
I would appreciate any ideas on how to solve this problem.
I believe the options should have the following structure:
const options = {
main: [{name: 'name', value: 'first'}, {name: 'name', value: 'second'}],
additional: {
first: [{name: '', value: 'first-one'}, {name: '', value: 'first-two'}],
second: [{name: '', value: 'second-one'}, {name: '', value: 'second-two'}]
},
};