问询styled-components中<{ $primary?: boolean; }>语法的含义

这是TypeScript泛型语法，用来给你创建的Button样式组件定义接收的props类型，拆解来看：

• <> 是TypeScript泛型的标记，用来把props类型传递给styled.button这个样式生成函数，让TypeScript能约束组件可接收的props结构
• { $primary?: boolean; } 是一个对象类型定义：
  • $primary 是自定义props的名称，开头的$是styled-components的约定写法，专门用来区分组件自己的props和HTML元素的原生属性（比如button的type、disabled），避免命名冲突
  • ? 表示这个props是可选的，使用组件时可以不传入这个属性
  • boolean 限定了这个props的值只能是true或false

举个实际使用的例子：

// 传入$primary，触发深色背景样式
<Button $primary>主要按钮</Button>
// 不传$primary，使用默认浅色样式
<Button>普通按钮</Button>

有了这个类型定义后，TypeScript会在编译阶段帮你检查props的类型是否合规，比如你要是传了字符串类型给$primary，就会立刻抛出类型错误。

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