TypeScript报错：类型'boolean'无法赋值给类型'false'求助

这个错误的核心原因是：你定义的QtyComponentProps是联合类型，要求isWarrantyItem必须是精确的true或false字面量类型，而你传入的isWarrantyItem是宽泛的boolean类型（包含true和false两种可能）。TypeScript在编译时无法确定变量的具体值，因此无法匹配联合类型中的任何一个分支，从而抛出类型不兼容的错误。

下面是几种可行的解决方案：

方案1：让变量类型精确为字面量类型 #

如果你能确定isWarrantyItem的具体值，在定义变量时使用const断言或明确标注字面量类型，让TypeScript推断出精确的类型：

// 方式1：使用const断言
const isWarrantyItem = true as const;
// 方式2：明确标注字面量类型
const isWarrantyItem: false = false;

这样变量的类型就不再是boolean，而是true或false字面量，能完美匹配联合类型的要求。

方案2：通过条件分支明确类型 #

如果isWarrantyItem的值是动态的，你可以通过条件判断拆分渲染逻辑，在每个分支中传入明确的字面量值，同时确保product的类型对应正确：

{isWarrantyItem ? (
  <RenderQtyComponent
    product={product as WarrantyProps}
    loading={loading}
    itemPrice={itemPrice}
    itemQuantity={itemQuantity}
    isWarrantyItem={true}
  />
) : (
  <RenderQtyComponent
    product={product as SearchOffers}
    loading={loading}
    itemPrice={itemPrice}
    itemQuantity={itemQuantity}
    isWarrantyItem={false}
  />
)}

这里的as断言是在确保product类型与isWarrantyItem值匹配的前提下使用的，如果你能通过类型守卫让TypeScript自动推断product的类型，可以去掉断言。

方案3：放宽Props类型（不推荐，会丢失类型安全） #

如果不需要严格关联isWarrantyItem和product的类型，可以修改Props定义，把isWarrantyItem设为boolean，同时让product为两种类型的联合：

type QtyComponentProps = {
  loading: boolean;
  itemQuantity: number;
  itemPrice: number | string;
  isWarrantyItem: boolean;
  product: WarrantyProps | SearchOffers;
};

这种方式会失去TypeScript的类型校验能力，无法保证isWarrantyItem为true时product一定是WarrantyProps，所以仅在不需要严格类型约束时使用。

内容的提问来源于stack exchange，提问作者Bharat Soni