TypeScript中不修改接口驼峰命名 如何为属性设置别名匹配后端字段

以下是3种不修改原有驼峰命名接口的解决方式，可根据业务场景选择：

方案1：新增字段转换逻辑（最常用，无类型安全风险） #

先按接口要求的驼峰格式赋值变量，再通过转换函数将驼峰字段转为后端要求的下划线格式，既符合TS类型校验规则，又满足后端字段要求。如果请求体包含嵌套对象，修改转换函数为递归处理即可。
代码示例：

// 原有接口保持不变
interface IPostBody{
  titleString:string;
  createdAt:string;
}

// 1. 先按驼峰赋值，符合类型校验
const body:IPostBody = {
  titleString: 'hehe',
  createdAt: 'my home'
}

// 2. 编写通用驼峰转下划线函数
function camelToSnake(obj: Record<string, any>) {
  const snakeObj: Record<string, any> = {}
  for (const key in obj) {
    const snakeKey = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
    snakeObj[snakeKey] = obj[key]
  }
  return snakeObj
}

// 3. 转换后作为请求体发送
const requestBody = camelToSnake(body)
// 此时requestBody就是{title_string: 'hehe', created_at: 'my home'}，直接发请求即可

方案2：使用类型断言（适合临时快速处理场景） #

如果是一次性场景不想写转换逻辑，可以通过类型断言绕开当前的类型检查，注意该方式需要自行保证字段值和类型匹配，避免类型安全问题。
代码示例：

const requestBody = {
  title_string: 'hehe',
  created_at: 'my home'
} as unknown as IPostBody

方案3：请求拦截统一转换（工程化场景首选） #

如果项目中大量存在前后端命名规范不一致的情况，可以直接在请求库的拦截层统一做驼峰转下划线处理，业务代码全程使用驼峰命名即可，无需单独处理每个请求。
以Axios为例的配置示例：

import axios from 'axios'

// 复用方案1的camelToSnake函数
function camelToSnake(obj: Record<string, any>) {
  const snakeObj: Record<string, any> = {}
  for (const key in obj) {
    const snakeKey = key.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`)
    snakeObj[snakeKey] = obj[key]
  }
  return snakeObj
}

axios.interceptors.request.use(config => {
  // 仅处理POST请求的请求体
  if (config.method === 'post' && config.data) {
    config.data = camelToSnake(config.data)
  }
  return config
})

// 业务代码直接按驼峰赋值发送请求即可，不需要手动转换
const body:IPostBody = {
  titleString: 'hehe',
  createdAt: 'my home'
}
axios.post('/api/xxx', body)

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