If I have the following TypeScript interfaces, how do I define user to accept either the Baseball, Basketball, or Football interface, each with varying properties?
Currently, only the overlapping properties are accessible. In this case, it is user.stats.A.
I am using Vue 3's Composition API.
interface Profile {
firstName: string
lastName: string
status: string
}
export interface Baseball extends Profile {
stats {
A: string
B: string
...
}
}
export interface Basketball extends Profile {
stats {
A: string
C: string
...
}
}
export interface Football extends Profile {
stats {
A: string
D: string
...
}
}
setup(){
const user = reactive<Baseball | Basketball | Football>({
firstName: 'Michael'
lastName: 'Jordan'
status: 'GOAT'
stats: {
...basketball specific properties
}
}
})