I need to design a data structure for retrieving survey questions from the backend system.
The fields id, description, and optionType will be populated by the backend. Depending on the value of optionType, I aim to include the options for the question, which will display as radio buttons on the frontend.
export type QuestionDto<T = OptionMap> = T extends 1
? {
id: number;
description: string;
optionType: T;
options: YesNoOption;
}
: T extends 2
? {
id: number;
description: string;
optionType: T;
options: YesNoSomewhatOption;
}
: {
id: number;
description: string;
optionType: T;
options: AgeOption;
};
type YesNoOption = {
1: 'Yes';
2: 'No';
};
type YesNoSomewhatOption = {
1: 'Yes';
2: 'No';
3: 'Somewhat';
};
type AgeOption = {
1: '1 Year old';
2: '2 Year old';
3: '3 Year old';
4: '4 Year old';
};
export type OptionMap = 1 | 2 | 3 | 4;
This structure is applied when fetching data from the backend system
return this.httpClient.get<QuestionDto[]>(
`${environment.apiUrl}/assessments`
);
The options field is not automatically generated for every question.