How can I restrict keys in the used type?

Issue

I write a library

type State = {
  playing: boolean
  phases: {
    [key: string]: {
      progress: number
    }
  }
}

class BaseWidget {
  state: State

  constructor() {
    this.state = {
      playing: false,
      phases: {},
    }
  }
}

I use it like this

class Widget extends BaseWidget {
    constructor() {
        super()
        this.state.phases = {
            start: {
                progress: 0,
            },
            finish: {
                progress: 0,
            },
        }
    }
}

Different classes of inherited BaseWidget have different phases
How can I specify that this Widget class will only have a start and a finish?
Is it possible to somehow clarify the State type from the Widget class?
Or maybe I need to use generics?
Maybe I need to use not [key: string], but [key in keyof T]? But how do I pass T? What is the correct syntax?
Thanks!

Solution

You can't use an index signature to restrict the type of the keys, but you can use the Record utility type to get the same result. Because you're initializing phases with {} initially, you'll need to make it a 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,
            }
        }
    }
}

playground link

If you don't actually want it to be Partial, you can initialize it through the constructor of the base class; this guarantees that all keys are always present:

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,
            },
        })
    }
}

playground link

Answered By - Thomas