reactjs - Typescript kaster fejl med spread-operator

Jeg har følgende simple React-komponent:

export interface BadgeProps {
  children: React.ReactNode | string | React.ReactNode[],
  layout: "gray" | "danger" | "success" | "brand",
  size?: "sm" | "base",
}

const Badge: React.FC<BadgeProps> = ({ children }) => {
  return (
    <div data-test="component-badge">{children}</div>
  );
}

Når jeg nu kalder komponenten på denne måde, fungerer det fint:

<Badge layout="gray">Text</Badge>

Men når jeg sender props med en spread-operator, får jeg følgende fejl.

const props = { layout: "gray" };
return (
  <Badge {...props}>Text</Badge>
);

Typen 'string' kan ikke tildeles typen '"gray" | "danger" | "success" | "brand"'

Jeg føler, at det bare burde fungere fint, og jeg har ingen idé om, hvorfor det fejler. Er dette en misforståelse af, hvordan Typescript fungerer?

Svar #1

Det er fordi "gray" | "danger" | "success" | "brand" er en specifik type, der kun kan være en af disse strenge, men når du tildeler sådan her:

const props = { layout: "gray" };

Typescript udleder, at layout-egenskaben er en string og ikke din specielle type, derfor fejlen.

For at rette denne fejl skal du selv markere typen.

export type LayoutType = "gray" | "danger" | "success" | "brand";

export interface BadgeProps {
  children: React.ReactNode | string | React.ReactNode[],
  layout: LayoutType,
  size?: "sm" | "base",
}

const Badge: React.FC<BadgeProps> = ({ children }) => {
  return (
    <div data-test="component-badge">{children}</div>
  );
}



const props: { layout: LayoutType } = { layout: "gray" };
// ------------------------^ your layout type 
return (
  <Badge {...props}>Text</Badge>
);

Relaterede artikler