Converting Snake Case to Camel Case in TypeScript: A Comprehensive Guide

Introduction

In TypeScript, it's common to work with data structures where the naming conventions need to be transformed. One frequent requirement is converting snake_case to camelCase. This conversion can streamline code readability and consistency, especially when integrating with different APIs or working with varied data sources.

What is Snake Case and Camel Case?

Snake Case: Uses underscores to separate words. Example: first_name.

Camel Case: Uses capitalization of the first letter of each word, except the first word, to indicate word boundaries. Example: firstName.

The Problem

Given a TypeScript interface with snake_case properties, how can we convert these property names to camelCase?

The Solution: TypeScript Utility Types

We'll create TypeScript utility types to transform the keys of an interface from snake_case to camelCase.

Step-by-Step Guide

1. Defining the Original Interface

We start with a simple interface, IUser, where the properties are in snake_case:

type IUser = {
  id: number;
  first_name: string;
  last_name: string;
  age: number;
}

2. Creating the SnakeToCamelCase Utility Type

The SnakeToCamelCase type recursively transforms a snake_case string to camelCase.

type SnakeToCamelCase<S extends string> =
  S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
  : S;

Explanation:

• Template Literal Types: We use template literal types to split the string at the underscore.
• Recursion: The type recursively processes each segment of the string.
• Capitalize: The Capitalize utility type is used to capitalize the first letter of each segment after the first.

3. Applying the Transformation to Interface Keys

The ConvertSnakeToCamelCase type transforms the keys of an object from snake_case to camelCase.

type ConvertSnakeToCamelCase<T> = {
  [K in keyof T as SnakeToCamelCase<string & K>]: T[K]
};

Explanation:

• Mapped Types: We iterate over each key K in the interface T.
• Key Transformation: We apply the SnakeToCamelCase transformation to each key.

4. The Resulting CamelCase Interface

We can now use the ConvertSnakeToCamelCase type to transform our IUser interface.

type IUserCamelCase = ConvertSnakeToCamelCase<IUser>;

Result:

type IUserCamelCase = {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
}

Conclusion

Transforming naming conventions in TypeScript can significantly improve code consistency and readability. With utility types, we can perform complex transformations at the type level, ensuring type safety and reducing runtime errors. Whether you're integrating with APIs or refactoring legacy code, these techniques will streamline your TypeScript development.

By understanding and utilizing these TypeScript features, you can write cleaner, more maintainable code, and harness the full power of TypeScript's type system.