在 Typescript 中，如何定义一个 class 接口，其中包含一个属性成员，该属性成员是可区分的联合类型？

Question

这是我要实现的目标的简化示例：

export enum DISPLAY_MODE {
  MULTI = "multi",
  SOLITARY = "solitary"
}

interface MultiAssetDefinition {
  displayMode: DISPLAY_MODE.MULTI;
  items: string[];
}

interface SolitaryAssetDefinition {
  displayMode: DISPLAY_MODE.SOLITARY;
  item: string;
}

type AssetDefinition = SolitaryAssetDefinition | MultiAssetDefinition;

const assets: AssetDefinition[] = [
  { displayMode: DISPLAY_MODE.MULTI, items: ["a", "b"] },
  { displayMode: DISPLAY_MODE.SOLITARY, item: "a" }
];

interface AssetDefiner {
  assetDefinition: AssetDefinition;
}

class AssetHolder implements AssetDefiner {
  assetDefinition = {
    displayMode: DISPLAY_MODE.MULTI,
    items: ["a", "b"]
  };
}

assets的定义正确地断言了数组成员的类型。 但是，在 class 定义中，类型检查器抱怨DISPLAY_MODE.MULTI不是DISPLAY_MODE类型。 这是一个现场复制： https://codesandbox.io/s/discriminate-union-class-interface-issue-8buqq?file=/src/index.ts

我是否正在尝试做一些 TS 做不到的事情？ 我可以通过其他方式实现吗？

Answer 1

当您显式键入属性时它会起作用：

class AssetHolder implements AssetDefiner {
  assetDefinition: AssetDefinition = {
    displayMode: DISPLAY_MODE.MULTI,
    items: ["a", "b"]
  };
}

对于另一个选项：

export enum DISPLAY_MODE {
  MULTI = "multi",
  SOLITARY = "solitary"
}

interface MultiAssetDefinition {
  displayMode: DISPLAY_MODE.MULTI;
  items: readonly string[];
}

interface SolitaryAssetDefinition {
  displayMode: DISPLAY_MODE.SOLITARY;
  item: string;
}

type AssetDefinition = SolitaryAssetDefinition | MultiAssetDefinition;

interface AssetDefiner {
  assetDefinition: AssetDefinition;
}

class AssetHolder implements AssetDefiner {
  assetDefinition = {
    displayMode: DISPLAY_MODE.MULTI,
    items: ["a", "b"]
  } as const;
}