Typescript，基于字符串文字类型值的条件类型

Question

I'm a little stuck on how to define a conditional type for typescript based on a predefined string literal

This is a mockup / example to help explain For a little background, a user is supposed to label data from images, currently there are only 2 types of things to label (for this example lets say its pedestrians and vehicles ) potentially more in the future.

In my Redux store I am storing data from an API request (request gets a new set of data to label based on one of these types). The issue is the data that i get is in different formats for the two types of things to label aka array of frames or object with values that are frame arrays.

type ILabelingTypes = "pedestrians" | "vehicles"

A frame would look like this

interface IFrame {
    url: string
    orientation: number
    // anything else related to a frame
}

The api requests would be /labeling/vehicles/new with an example response

{
    // meta info about the labeling session
    frames: IFrame[]
}

or /labeling/pedestrians/new with an example response

{
    // meta info about the labeling session
    frames: Map<string, IFrame[]>
}

The issue I'm having now is when I define my store interface, how do i correctly type the frames key so that I don't have to check everywhere i go to use it what type of data it is?

interface ILabelingStore {
    labelingType: ILabelingTypes
    frames: // what do i put here?
}

Meaning when i go to render or use this data I'd like to simply call methods that i know exist depending on the labelingType defined in the store

---

For the React component side, when i go to render the frames I build a queue of frames to complete, so i need to know what type the data is in the respective component (This is what i would like to do instead of having to check the type of frames)

// pedestrians component
componentDidMount() {
    Object.entries(this.props.frames).forEach( (key, val) => this.queue.concat(val))
}

// vehicles component
componentDidMount() {
    this.queue.concat(this.props.frames)
}

Answer 1

You can create a discriminated union:

type ILabelingStore = ({
        labelingType: "vehicles",
        frames: IFrame[]
    } | {
        labelingType: "pedestrians",
        frames: { [key: string]: IFrame[] }
    });

Demo