I am working on developing various components for an app, each with its own specific structure. The general structure is defined as COMPONENT. Within this framework, there are two distinct components: HEADING and TEXT. These components should be subclasses of COMPONENT, meaning that if I try to use the type "hero", TypeScript should flag it as not being of ELEMENT_TYPE.
The definitions for these types are stored in a file named types.d.ts.
How can I specify that HEADING and TEXT must adhere to the COMPONENT structure?
declare type ELEMENT_TYPE = "div" | "p" | "h1" | "button";
declare type COMPONENT = {
type: ELEMENT_TYPE;
children: string;
styles: any;
};
declare type HEADING = {
type: "hero";
children: string;
styles: any;
}
declare type TEXT = {
type: "p";
children: string;
styles: any;
}
My intention is to achieve something like this:
declare type HERO: COMPONENT = {
type: "hero";
children: (COMPONENT | string)[];
styles: CSSProperties;
}