Enforcing object keys from in TypeScript

Question

Let's say I have

type Panel = 'store' | 'logs'

I want to create an object that has key => ReactChild with key being only the values in Panel

const object = {
    store: StoreComponent,
    logs: LogsComponent
}

How do I define the type of object here?

Answer 1

The predefined mapped type Record is what you are looking for. This will take a union of keys and create an object type where each property has the type specified as the second parameter to the type:

type Panel = 'store' | 'logs'

const object:Record<Panel, ReactChild> = {
    store: StoreComponent,
    logs: LogsComponent
}