如何在TypeScript中定义支持响应式格式的Icon组件size类型？

首先定义基础尺寸类型，保留原有的可选值：

type BaseSize = '2' | '4' | '6';

接着定义单个响应式尺寸单元，支持纯尺寸值或带md/lg前缀的格式：

type ResponsiveSizeItem = BaseSize | `${'md' | 'lg'}:${BaseSize}`;

最后通过递归模板字符串类型，实现支持空格分隔的多尺寸组合：

type SizeValues = ResponsiveSizeItem | `${ResponsiveSizeItem} ${SizeValues}`;

类型验证示例 #

以下取值都会被SizeValues类型允许：

• '2'
• 'md:4'
• '2 md:4'
• '2 md:4 lg:6'

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