Within my class, I have:
class Target {
...
readonly overlay: {
type: 'none'
} | {
type: 'centering',
style?: {
color?: string,
offset?: number,
size?: number,
}
} | {
type: 'entering',
style?: {
color?: string,
offset?: number,
direction?: 'up' | 'down',
angle?: number,
size?: number
}
};
...
}
Alongside this class, I also have an abstract class:
abstract class AbstractParams<TParam> {
...
param: TParam
...
}
In order to define specific classes for the style attributes within the overlay based on the value of the type attribute ('centering', 'entering') from the abstract class, I need to:
Create a type for CenteringStyleType when the type is 'centering':
type CenteringStyleType = // Type of style attribute within overlay when its attribute `type` equals to `centering`.
class CenteringParams extends AbstractParams<CenteringStyleType> {
// The param attribute here will have type: { color?: string, offset?: number, size?: number }
// This can then be utilized
}
Similarly, create a type for EnteringStyleType when the type is 'entering':
type EnteringStyleType = // Type of style attribute within overlay when its attribute `type` equals to `entering`.
class EnteringParams extends AbstractParams<EnteringStyleType> {
// The param attribute here will have type: { color?: string, offset?: number, size?: number }
}
Specifically, objects like EnteringStyleParams and CenteringStyleParams will assign a style to a Target Object, thus requiring them to share the same style definition.