5

this is an example input interface

export interface CssProperties {
    alignContent: number | string | null;
    alignItems: number | string | null;
    alignSelf: number | string | null;
    alignmentBaseline: number | string | null;
}

the result type should look like this.

-> adds kebab case types

export interface CssProperties {
    align-content: number | string | null;
    alignContent: number | string | null;
    align-items: number | string | null;
    alignItems: number | string | null;
    align-self: number | string | null;
    alignSelf: number | string | null;
    alignment-baseline: number | string | null;
    alignmentBaseline: number | string | null;
}

4 Answers 4

11

UPDATED FOR TS4.5+

Now that TypeScript supports tail recursion elimination on conditional types we can write Kebab<T> in a straightforward way that should handle strings up to ~1000 characters:

type Kebab<T extends string, A extends string = ""> =
    T extends `${infer F}${infer R}` ?
    Kebab<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> :
    A

This works by iterating character-by-character, and inserting a "-" before each character which is not already lowercase (so caseless characters like numbers will not get a dash before them), and then lowercasing each character.

Non-tail-recursive character-by-character iteration in TypeScript 4.5+, or any recursive type in TypeScript 4.4 and below hits recursion limits for modestly long strings, sometimes even strings of only twenty or so characters, and weird workarounds were required to handle longer strings. But now we can handle string literals longer than I imagine anyone would reasonably need:

type Testing = Kebab<"itWasTheBestOfTimesItWasTheWorstOfTimesItWasTheAgeOfWisdomItWasTheAgeOfFoolishnessItWasTheEpochOfBeliefItWasTheEpochOfIncredulityItWasTheSeasonOfLightItWasTheSeasonOfDarknessItWasTheSpringOfHopeItWasTheWinterOfDespair">
// type Testing = "it-was-the-best-of-times-it-was-the-worst-of-times-it-was-the-age-of-wisdom-it-was-the-age-of-foolishness-it-was-the-epoch-of-belief-it-was-the-epoch-of-incredulity-it-was-the-season-of-light-it-was-the-season-of-darkness-it-was-the-spring-of-hope-it-was-the-winter-of-despair"

Now we can use key remapping (also a TS4.1 feature) to easily convert from an object with camelCase keys to one with kebab-case keys:

type KebabKeys<T> = { [K in keyof T as K extends string ? Kebab<K> : K]: T[K] };

Finally, let's try it out on your example:

export interface CssPropertiesCamel {
    alignContent: number | string | null;
    alignItems: number | string | null;
    alignSelf: number | string | null;
    alignmentBaseline: number | string | null;
}    

type CssPropertiesKebab = KebabKeys<CssPropertiesCamel>;
/* type CssPropertiesKebab = {
    "align-content": number | string | null;
    "align-items": number | string | null;
    "align-self": number | string | null;
    "alignment-baseline": number | string | null;
} */

export interface CssProperties extends CssPropertiesCamel, CssPropertiesKebab { }

Looks good! We've turned CssPropertiesCamel into CssPropertiesKebab, and then CssProperties can just be a merged version of those two types.

Playground link to code

2
  • 1
    Your updated solution adds a "-" at the beginning of the word. You have to deal with the first letter scenario.
    – Bernardo
    Feb 14 at 11:34
  • @Bernardo Maybe you're trying to convert PascalCase aka UpperCamelCase (capitalized) to kebab-case? The use case here is camelCase aka lowerCamelCase (uncapitalized), which works fine with the solution as written. If you have a different use case you might need a different solution.
    – jcalz
    Feb 14 at 15:15
4

Here's a solution I came to that uses a trampolining technique to defer the typescript type so it doesn't throw recursive type errors.

export type KebabCase<S> = S extends `${infer C}${infer T}`
  ? KebabCase<T> extends infer U
    ? U extends string
      ? T extends Uncapitalize<T>
        ? `${Uncapitalize<C>}${U}`
        : `${Uncapitalize<C>}-${U}`
      : never
    : never
  : S
0

Here you have another approach:

export interface CssProperties {
    alignContent: number | string | null;
    alignItems: number | string | null;
    alignSelf: number | string | null;
    alignmentBaseline: number | string | null;
}

type ToCebab<T extends string> =
    T extends `align${infer Prefix}`
    ? `aling-${Uncapitalize<Prefix>}`
    : never;

type Result = {
    [P in keyof CssProperties as ToCebab<P>]: CssProperties[P]
} & CssProperties

Playground link

Template literal strings - Uncapitalize

0

Inspired by the great answer of @jcalz, I made a modified version to make snake_case into kebab-case:

type KebabCase<
  T extends string,
  A extends string = ''
> = T extends `${infer P1}_${infer P2}${infer R}`
  ? KebabCase<R, `${A}${P1}-${P2}`>
  : `${A}${T}`;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.