如何用TypeScript实现类似Tailwind的apply函数及类型提示

现有以下TypeScript代码：

const AlignContent = {
    'content-start': {alignContent: 'flex-start'},
    'content-center': {alignContent: 'center'},
    'content-end': {alignContent: 'flex-end'},
    'content-stretch': {alignContent: 'stretch'},
    'content-between': {alignContent: 'space-between'},
    'content-around': {alignContent: 'space-around'},
}

const AlignItems = {
        'items-stretch': {alignItems: 'stretch'},
    'items-start': {alignItems: 'flex-start'},
    'items-center': {alignItems: 'center'},
    'items-end': {alignItems: 'flex-end'},
    'items-baseline': {alignItems: 'baseline'},
}


const styles = {
    ...AlignContent,
    ...AlignItems
}


function apply(styles: ??? ) {
  //apply code here
}

需要为apply函数的参数创建类型，满足：

• 基于keyof typeof styles
• 支持空格分隔的多值调用（比如apply('items-stretch content-around')）
• 不能仅用string类型，必须提供keyof typeof styles中每个值的智能提示

可以通过模板字面量联合类型结合递归实现支持空格分隔的多键值类型，同时保留智能提示：

const AlignContent = {
    'content-start': {alignContent: 'flex-start'},
    'content-center': {alignContent: 'center'},
    'content-end': {alignContent: 'flex-end'},
    'content-stretch': {alignContent: 'stretch'},
    'content-between': {alignContent: 'space-between'},
    'content-around': {alignContent: 'space-around'},
} as const; // 锁定类型为字面量，避免被拓宽为string

const AlignItems = {
        'items-stretch': {alignItems: 'stretch'},
    'items-start': {alignItems: 'flex-start'},
    'items-center': {alignItems: 'center'},
    'items-end': {alignItems: 'flex-end'},
    'items-baseline': {alignItems: 'baseline'},
} as const;

const styles = {
    ...AlignContent,
    ...AlignItems
} as const;

// 单个样式键的类型
type StyleKey = keyof typeof styles;

// 递归定义支持空格分隔的多键组合类型
type StyleKeys = StyleKey | `${StyleKey} ${StyleKeys}`;

function apply(styles: StyleKeys) {
  // apply code here
}

// 测试示例：编辑器会提供合法键的智能提示
apply('items-stretch');
apply('content-around items-center');
apply('content-start items-baseline content-stretch');

关键说明： #

1. as const断言：给对象加上该断言后，TypeScript会将对象的键锁定为具体的字面量类型，而非默认的string，这样keyof typeof styles才能得到准确的键值联合类型。
2. 递归模板字面量：StyleKeys通过递归逻辑，允许单个合法键，或者“合法键+空格+合法键组合”的形式，支持任意数量的空格分隔键值。
3. 智能提示支持：由于类型基于具体的StyleKey联合类型，编辑器会自动提示所有合法的单个键值，以及组合后的合法选项。

内容的提问来源于stack exchange，提问作者Wiratama Adi Wibawa