He estado atormentando mi cerebro durante horas con esto, básicamente, tengo un montón de diferentes tipos definidos así:
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;Luego tengo una función para convertir una respuesta API a una versión limpia:
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; } El problema es que recibo errores de mecanografiado en cada propiedad de convertedProps . Cuando tengo un solo tipo definido en allComponentProps como:
export type allAvailableComponents = ButtonAPIProps; No obtengo los errores en las propiedades del paragraph--button convertedProps , pero por supuesto sí en el paragraph--slide propiedades convertedProps .
Nuevo en TypeScript, así que tengan paciencia conmigo, probablemente me estoy perdiendo algo simple aquí y probé un montón de cosas diferentes, pero ninguna funciona.
El mensaje de error es que esos accesorios no existen en los tipos definidos.
El problema fundamental es que restringir el tipo de component no reduce el tipo de convertedProps , por lo que TypeScript no sabe que las asignaciones están bien.
Puede solucionarlo creando componentProps en las ramas:
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; }Si el proceso de limpieza está involucrado, puede dividirlo en funciones auxiliares:
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; }