Typescript使用多个类型的问题

Question

我绞尽脑汁想了几个小时，基本上，我有一堆不同的类型定义像这样:

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的每个属性上得到Typescript错误。当我在allComponentProps中只定义了一个类型时，例如:

export type allAvailableComponents = ButtonAPIProps;

我没有得到paragraph--buttonconvertedProps属性的错误，但当然在paragraph--slideconvertedProps属性上做。

对Typescript来说是新的，所以请原谅我，我可能在这里错过了一些简单的东西，并尝试了一堆不同的东西，但没有一个工作。

错误提示:在定义的类型中不存在这些道具。

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

Answer 1

根本的问题是缩小component的类型并没有缩小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;
}

操场上联系