在 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;
}