如何实现TypeScript类型级Join函数？结合Split函数实现属性名连字符与下划线转换

当然可以实现类型级的Join函数来配合你现有的Split，完成属性名从连字符到下划线的转换需求！下面是完整的实现和用法示例：

首先，你提供的Split类型已经能很好地把字符串按指定分隔符拆分成字符串数组，接下来我们实现对应的Join类型：

type Join<T extends string[], D extends string> = T extends [] 
  ? '' 
  : T extends [infer First extends string] 
  ? First 
  : T extends [infer First extends string, ...infer Rest extends string[]] 
  ? `${First}${D}${Join<Rest, D>}` 
  : string;

这个Join类型的逻辑很直观：

• 如果传入的是空数组，直接返回空字符串
• 如果数组只有单个元素，直接返回该元素（避免产生多余的分隔符）
• 如果数组有多个元素，就递归地把第一个元素、分隔符D，以及剩余元素的Join结果拼接起来
• 最后的兜底分支用来处理泛型传入不确定数组的边缘情况

接下来就可以结合Split和Join实现你想要的属性名转换类型了，和你给出的用法示例完全契合：

// 你提供的Split类型
type Split<S extends string, D extends string> = string extends S 
  ? string[] 
  : S extends '' 
  ? [] 
  : S extends `${infer T}${D}${infer U}` 
  ? [T, ...Split<U, D>] 
  : [S];

// 我们实现的Join类型
type Join<T extends string[], D extends string> = T extends [] 
  ? '' 
  : T extends [infer First extends string] 
  ? First 
  : T extends [infer First extends string, ...infer Rest extends string[]] 
  ? `${First}${D}${Join<Rest, D>}` 
  : string;

// 属性名转换工具类型
type ChangeHyphensToUnderscore<T> = { 
  [P in keyof T & string as `${Join<Split<P, '-'>, '_'>}`]: T[P] 
};

我们来测试一下实际效果：

// 原始接口
interface User {
  'user-name': string;
  'age-range': number;
  'email-address': string;
}

// 转换后的类型
type UserWithUnderscores = ChangeHyphensToUnderscore<User>;

UserWithUnderscores最终会被TypeScript解析为：

interface UserWithUnderscores {
  user_name: string;
  age_range: number;
  email_address: string;
}

完全实现了把属性名中的连字符替换为下划线的需求！

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