Question

我有以下简单的React组件：

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>
  );
}

当我现在以这种方式调用组件时，它可以正常工作：

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

但是当我使用散布运算符传递道具时，会出现以下错误。

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

类型'string'不能分配给类型'“ gray” | “危险” | “成功” | “品牌””

我觉得它应该可以正常工作，我不知道为什么它会失败。这是对Typescript的工作方式的误解吗？

Answer 1

因为"gray" | "danger" | "success" | "brand"是一种特定类型，只能是这些字符串之一，但是当您这样分配时：

const props = { layout: "gray" };

Typescript推断layout属性是字符串而不是您的特殊类型，因此是错误。

要解决此错误，您需要自己标记类型。

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>
);

Typescript使用传播运算符引发错误

1 个答案: