TypeScript 객체 키 가이드
TypeScript Object Keys를 camelCase로 변환
snake_case API payload를 camelCase object로 만들 때 runtime 변환과 compile-time shape를 함께 고려해야 합니다.
TypeScript 구현
type CamelCase<S extends string> =
S extends `${infer Head}_${infer Tail}`
? `${Lowercase<Head>}${Capitalize<CamelCase<Tail>>}`
: Uncapitalize<S>
type Camelize<T> =
T extends readonly (infer Item)[] ? Camelize<Item>[] :
T extends Record<string, unknown> ? { [K in keyof T as K extends string ? CamelCase<K> : K]: Camelize<T[K]> } : T
function toCamelKey(key: string) {
return key.replace(/[-_]+([a-zA-Z0-9])/g, (_, char: string) => char.toUpperCase())
}
function keysToCamel<T>(value: T): Camelize<T> {
if (Array.isArray(value)) return value.map(keysToCamel) as Camelize<T>
if (value === null || typeof value !== "object") return value as Camelize<T>
const output: Record<string, unknown> = {}
for (const [key, child] of Object.entries(value)) {
const nextKey = toCamelKey(key)
if (Object.hasOwn(output, nextKey)) throw new Error(`Key collision: ${nextKey}`)
output[nextKey] = keysToCamel(child)
}
return output as Camelize<T>
}재귀 mapped type으로 변경된 string key와 array 구조를 표현할 수 있습니다.
type-level remapping은 실제 데이터를 바꾸지 않으므로 runtime function도 반드시 필요합니다.
프로덕션 예외 사례
- 복잡한 약어 규칙은 runtime과 type-level 결과를 다르게 만들 수 있습니다.
- key collision은 type이 맞아 보여도 runtime data 문제입니다.
- Symbol key와 비 JSON instance는 명시적으로 처리해야 합니다.
- runtime에서 _id/$schema prefix를 보존한다면 정확한 type이 필요할 때 type layer에도 예외를 반영합니다.
객체 키 온라인 테스트
JSON 객체를 붙여넣어 재귀 변환, 최상위 전용, 제외 키, _/$ 접두사, 충돌 처리를 확인하세요.
.json 파일을 놓거나 기기에서 선택
파일은 브라우저에서만 읽습니다. 최대 크기: 5 MB.
변환된 JSON
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}파싱, 파일 읽기, 포맷 및 키 변환은 모두 브라우저에서 로컬로 실행됩니다. JSON 입력은 변환 서버로 전송되지 않습니다.