Question

我对如何根据预定义的字符串文字为typescript定义条件类型有点困惑

这是一个帮助解释的模型/示例对于一个小背景，用户应该标记图像中的数据，目前只有两种类型的东西需要标记（对于这个例子，我们可以说它的pedestrians和vehicles）可能在未来更多。

在我的Redux商店中，我存储来自API请求的数据（请求根据其中一种类型获取一组新数据进行标记）。问题是，我得到的数据是两种类型的事物的不同格式，用于标记帧数组或具有帧数组值的对象。

type ILabelingTypes = "pedestrians" | "vehicles"

框架看起来像这样

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

api请求将/labeling/vehicles/new带有示例响应

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

带有示例回复的

或/labeling/pedestrians/new

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

我现在遇到的问题是，当我定义我的商店界面时，我如何正确键入frames键，以便我无需在任何地方检查我去使用它的数据类型是

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

当我去渲染或使用这些数据时，我想根据商店中定义的labelingType简单地调用我知道存在的方法

对于React组件方面，当我去渲染帧时，我构建了一个帧队列来完成，所以我需要知道数据在相应组件中的类型（这是我想要的而不必检查帧的类型）

// 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

您可以创建一个有区别的联盟：

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

Demo

Typescript，基于字符串文字类型

1 个答案: