escribo una biblioteca
type State = { playing: boolean phases: { [key: string]: { progress: number } } } class BaseWidget { state: State constructor() { this.state = { playing: false, phases: {}, } } }lo uso así
class Widget extends BaseWidget { constructor() { super() this.state.phases = { start: { progress: 0, }, finish: { progress: 0, }, } } } Las diferentes clases de BaseWidget heredado tienen diferentes fases
¿Cómo puedo especificar que esta clase de Widget solo tendrá un inicio y un final ?
¿Es posible aclarar de alguna manera el tipo de estado de la clase Widget?
¿O tal vez necesito usar genéricos?
¿Tal vez necesito usar no [key: string], sino [key in keyof T]? Pero, ¿cómo paso T? ¿Cual es la sintaxis correcta?
¡Gracias!
Su pregunta es un poco amplia, pero mirando lo que está tratando de lograr, crearía algo como esto:
type State = Record<string, any>; class BaseWidget<S extends State> { state: S; constructor(initState: S) { this.state = initState; } } interface HasStartPhase { start: { progress: number; }; } interface HasFinishPhase { finish: { progress: number; extraInfo: string; }; } interface WidgetState extends State { playing: boolean; phases: HasStartPhase & HasFinishPhase; } class Widget extends BaseWidget<WidgetState> { constructor() { super({ playing: false, phases: { start: { progress: 0 }, finish: { progress: 0, extraInfo: "abc" } } }); } }Permite cualquier estado en su BaseWidget, y Widgets específicos pueden especificar su propia forma de estado. La creación de interfaces para las Fases le permite mezclarlas y combinarlas cuando sea necesario.
Aquí hay un TS Playground para que lo pruebes.
No puede usar una firma de índice para restringir el tipo de claves, pero puede usar el tipo de utilidad Record para obtener el mismo resultado. Debido a que inicialmente está inicializando phases con {} , deberá convertirlo en Partial<Record<...>> :
type State<T extends string> = { playing: boolean phases: Partial<Record<T, { progress: number }>> } class BaseWidget<T extends string> { state: State<T> constructor() { this.state = { playing: false, phases: {}, } } } type WidgetPhase = 'start' | 'finish' class Widget extends BaseWidget<WidgetPhase> { constructor() { super() this.state.phases = { start: { progress: 0, }, finish: { progress: 0, }, nonexistent: { // Compile error! progress: 0, } } } } Si en realidad no desea que sea Partial , puede inicializarlo a través del constructor de la clase base; esto garantiza que todas las claves estén siempre presentes:
type Phase = { progress: number } type State<T extends string> = { playing: boolean phases: Record<T, Phase> } class BaseWidget<T extends string> { state: State<T> constructor(phases: Record<T, Phase>) { this.state = { playing: false, phases: phases, } } } type WidgetPhase = 'start' | 'finish' class Widget extends BaseWidget<WidgetPhase> { constructor() { super({ start: { progress: 0, }, finish: { progress: 0, }, }) } }