如何为驼峰转snake case转换函数定义正确的TypeScript泛型类型

解决方案 #

该方案依赖TypeScript 4.1及以上版本的模板字面量类型和键重映射特性，核心是先定义递归转换类型工具，再关联到函数的返回值类型即可：

第一步：定义类型转换工具

// 核心工具类型：将驼峰字符串类型转换为蛇形字符串类型
type CamelToSnake<S extends string> = 
  S extends `${infer P1}${infer P2}` 
    ? P2 extends Uncapitalize<P2> 
      ? `${Lowercase<P1>}${CamelToSnake<P2>}` 
      : `${Lowercase<P1>}_${CamelToSnake<Uncapitalize<P2>>}` 
    : S

// 递归转换任意类型的键为蛇形
type Snakeize<T> = 
  T extends string ? T :
  T extends Array<infer U> ? Array<Snakeize<U>> :
  T extends object ? { [K in keyof T as CamelToSnake<string & K>]: Snakeize<T[K]> } :
  T

第二步：修改函数类型定义

function convertCamelToSnake<T>(target: T): Snakeize<T> {
  // 原有转换逻辑保持不变
  return convertedTarget as Snakeize<T>
}

效果测试

const a = { helloWorld: "bob", age: 21, nestedData: { userId: 123 } }
const convertedA = convertCamelToSnake(a)
// TS可正常识别所有转换后的属性
convertedA.hello_world // 类型为string
convertedA.age // 类型为number
convertedA.nested_data.user_id // 支持嵌套对象的键类型转换，类型为number

// 字符串、数组场景也可正常推断类型
const str = convertCamelToSnake("testString") // 返回值类型为string
const arr = convertCamelToSnake([{ userName: "alice" }, { userAge: 20 }]) 
// arr类型为 { user_name: string }[] | { user_age: number }[]

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