使用多種型別的打字稿問題

我為此絞盡腦汁了好幾個小時，基本上，我有一堆不同的型別定義如下：

export type SharedAPIProps = {
  id: string;
};

export type ButtonAPIProps = SharedAPIProps & {
  type: "paragraph--button";
  field_title: string;
};

export type SlideAPIProps = SharedAPIProps & {
  type: "paragraph--slide";
  field_slides: []
};

export type allAvailableComponents = ButtonAPIProps | SlideAPIProps;


export type ButtonProps = {
  title: string;
}

export type SlideProps = {
  slides: [];
} 

export type allCleanedProps = ButtonProps | SlideProps;

然后我有一個函式可以將 API 回應轉換為干凈的版本：

export const toCleanProps = (component: allAvailableComponents): allCleanedProps => {
  const { type } = component;
  
  const convertedProps: allCleanedProps = {} as allCleanedProps;

  switch (type) {
    case "paragraph--button":
      convertedProps.title = component.field_title;
      break;
    case "paragraph--slide":
      convertedProps.slides = component.field_slides;
      break;
  }

  return convertedProps;
}

問題是我在convertedProps. 當我只定義了一個型別時allComponentProps：

export type allAvailableComponents = ButtonAPIProps;

我沒有得到paragraph--button convertedProps屬性上的錯誤，但當然會出現屬性上的錯誤paragraph--slide convertedProps。

Typescript 的新手，所以請耐心等待，我可能在這里遺漏了一些簡單的東西并嘗試了很多不同的東西，但都沒有奏效。

錯誤訊息是這些道具在定義的型別上不存在。

下面是完整的例子：https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBDAnmYcDKALAhlYATAQQAUBJIqCMAZzgF44BvAKDjgEs8AuOKmKNgHYBzANxMAvmKahIsBMlQAhAK4wYEAcTIVqddNlyFS5SjQBkjFvJTcARGBxYhULGAwBadwCNV6gbbFWADM2YAAbPAB9GDYYMOBuXn5hMUkmaXBoeCQUdDCOYC0TXXpMHHwinXNLVhyEuHtHZ1cPdyp8vGAAqxDwqPaCqm4AbQBdCSkZLOtULDCwggA3LDYwrC94gGEIAFtIAWABGBp6FTUNStM4AB88gsvqKQzZbIU4M79ik5qEWPjEviCUQSdJTOR1O6dL56ZisAadIZwMapOCgzLgt5zMKbeJYA54aGnXwaaG3NAdYBfSbo AAYw0vAQEBxwDxhLgAAp6XsNIcYNwsUsVmsNsBtjyDkcqABKAXzFl4-CEgB8P3pAkZDBmcHEem5 z5gVRrHVjPVi2AsCVVTl2Nx PZDF1WBoWIVDqqUjhAHdYrSMJy6tKfiaXahGi5mm5PD5zv5OFZWCaNBarQSqgA6GJxVD0fW8o4Z3oRaJ-YBGpNwLy4LAAawrcFpYYaDkjLmjbQptgTleTAlTMGtpgz8OA33zkpgRdCJdHVAbrGrrPrVnE6VYuBgyigAkbKctg-TplSQA

uj5u.com熱心網友回復：

根本問題是縮小 of 的型別component并不會縮小 of 的型別convertedProps，因此 TypeScript 不知道賦值是否正常。

componentProps您可以通過在分支中創建來修復它：

export const toCleanProps = (component: allAvailableComponents): allCleanedProps => {
  const { type } = component;

  let convertedProps: allCleanedProps;

  switch (type) {
    case "paragraph--button":
      convertedProps = {
        title: component.field_title,
      };
      break;
    case "paragraph--slide":
      convertedProps = {
        slides: component.field_slides,
      };
      break;
    default:
      throw new Error(`Unexpected 'type'`);
  }

  return convertedProps;
}

游樂場鏈接

如果涉及清理程序，您可以將其拆分為輔助函式：

const cleanButtonProps = (component: ButtonAPIProps): ButtonProps => {
  return {
    title: component.field_title,
  };
};
const cleanSlideProps = (component: SlideAPIProps): SlideProps => {
  return {
    slides: component.field_slides,
  };
};

export const toCleanProps = (component: allAvailableComponents): allCleanedProps => {
  const { type } = component;

  let convertedProps: allCleanedProps;

  switch (type) {
    case "paragraph--button":
      convertedProps = cleanButtonProps(component);
      break;
    case "paragraph--slide":
      convertedProps = cleanSlideProps(component);
      break;
    default:
      throw new Error(`Unexpected 'type'`);
  }

  return convertedProps;
}

游樂場鏈接

標籤：javascript 打字稿

上一篇：基于陣列索引將值增加125的函式-javascript

下一篇：有沒有辦法在JavaScript的擴展類中的WeakMap中設定奇異值？