I am looking to create a function called emitEvent(event, extra?), which will be restricted by a string literal enum of known strings such as POPUP_OPEN and POPUP_CLOSED. The function will accept a second argument that is a specifically defined dictionary shape, only to be used with certain event keys.
Below is the list of all known events in the dictionary:
interface Events {
POPUP_OPEN: {name:'POPUP_OPEN',extra: {count:number}},
POPUP_CLOSED: {name:'POPUP_CLOSED'},
AD_BLOCKER_ON: {name:'AD_BLOCKER_ON', extra: {serviceName:string}},
AD_BLOCKER_OFF: {name:'AD_BLOCKER_OFF'}
}
Example usage with type constraints:
// $ExpectType {object: string; action: string; value: string;}
const t1 = emitEvent('POPUP_CLOSED')
// $ExpectError -> no extra argument allowed
const t11 = emitEvent('POPUP_CLOSED', {what:'bad'})
// $ExpectType {object: string;action: string;foo: string; count: number;}
const t2 = emitEvent('POPUP_OPEN',{count: 1231})
// $ExpectError -> extra argument is missing
const t22 = emitEvent('POPUP_OPEN')
My approach:
One major issue with this implementation is that TypeScript does not throw an error when the 'extra' field is not defined for dictionary values.
// ✅ NO ERROR
const t2 = emitEvent('POPUP_OPEN',{count: 1231})
// ✅ Error
const t2 = emitEvent('POPUP_OPEN',{})
// 🚨NO ERROR -> THIS SHOULD ERROR !
const t2 = emitEvent('POPUP_OPEN')
Implementation Details:
type ParsedEvent<Extra = void> = Extra extends object ? BaseParsedEvents & Extra : BaseParsedEvents
type BaseParsedEvents = {
object:string
action:string
value:string
}
type KnownEvents = keyof Events
type GetExtras<T> = T extends {name: infer N, extra: infer E} ? E : never;
function emitEvent<T extends KnownEvents>(event:T): ParsedEvent
function emitEvent<T extends KnownEvents, E extends GetExtras<Events[T]>>(event:T, extra: E): ParsedEvent<E>
function emitEvent<T extends string, E extends object>(event:T, extra?: E) {
const parsedEmit = parse(event)
return {...parsedEmit,...extra}
}
function parse(event:string): BaseParsedEvents {
const [object,action,value] = event.split('_')
return {object,action,value}
}
In conclusion, while it may seem impossible to implement, I hope to find a solution :)