類型聯合被簡化為“從不”打斷打字：類型被簡化為“從不”，因為屬性在某些成分中具有沖突類型

Question

我有一個從基本接口擴展的類型集合：

interface BaseType {
  id: number;
  titleText: string;
}

export enum ComponentType {
  AUDIO = 'type_audio',
  ARTICLE = 'type_article',
  BASIC = 'type_basic',
  DOWNLOAD = 'type_download',
  LINK = 'type_link',
  QUOTE = 'type_quote',
  VIDEO = 'type_video',
}

export interface BasicComponent extends BaseType {
  type: ComponentType.BASIC;
}

export interface QuoteComponent extends BaseType {
  type: ComponentType.QUOTE;
  subtitle?: string;
}

export interface LinkComponent extends BaseType {
  type: ComponentType.LINK | ComponentType.ARTICLE;
  subtitle?: string;
}


export interface DownloadComponent extends BaseType {
  type: ComponentType.DOWNLOAD;
}

export interface AudioComponent extends BaseType {
  type: ComponentType.AUDIO;
  mediaType: MediaType.AUDIO;
  mediaRef: Reference;
  configRef: Reference;
}

export interface VideoComponent extends BaseType {
  type: ComponentType.VIDEO;
  mediaType: MediaType.VIDEO;
  mediaRef: Reference;
  configRef: Reference;
}

但是當我創建一個可以是這些組件類型中的任何一種的類型，並使用 switch case 將它們分配給React組件時，我得到一個錯誤。

export type Component =
  | BasicComponent
  | AudioComponent
  | DownloadComponent
  | LinkComponent
  | VideoComponent
  | QuoteComponent;

  const getChild = () => {
    switch (props.type) {
      case ComponentType.AUDIO:
        return AudioComponent;
      case ComponentType.DOWNLOAD:
        return DownloadComponent;
      case ComponentType.ARTICLE:
      case ComponentType.LINK:
        return LinkComponent;
      case ComponentType.QUOTE:
        return QuoteComponent;
      case ComponentType.VIDEO:
        return VideoComponent;
      case ComponentType.BASIC:
        return BasicComponent;
    }
  };

  const Component = getChild();

  return <Component {...props} />;
  //           ^^^
  // The intersection 'IntrinsicAttributes & AudioTeaser & { children?: ReactNode; } &
  // DownloadTeaser & LinkTeaser & QuoteTeaser & VideoTeaser & BasicTeaser' was reduced
  // to 'never' because property 'type' has conflicting types in some constituents.

  // Type props is not assignable to type 'never'.

Answer 1

這將需要類似相關類型的東西，其中打字稿可以知道Component和props的類型是相關的。 目前這並不存在。

發生的情況是Component最終成為所有可能組件的聯合。 由於Component可以是任何一個有效的組件，因此只有使用滿足所有可能的組件 props 的 props（因此所有可能的 props 的交集）來創建這個組件才是安全的。 由於 props 是互斥的，你最終會在這個交集的某處得到一個never （即沒有可能值的類型）。

最簡單的解決方案是使用類型斷言將組件的聯合轉換為一個接受 props 的組件，該 props 是所有可能的 props 的聯合。 現在這通常不安全，但在這種情況下，我們告訴打字稿我們更了解：

    const Component = getChild() as React.FC<Component>;

    return <Component {...props} />;

游樂場鏈接