TypeScript Template literals Array Join

Question

I found a definition for a type level Split function:

type Split<S extends string, D extends string> =
    string extends S ? string[] :
    S extends '' ? [] :
    S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];

Is there also a way to create a type level Join<string[], string> function, so I can use them for example for changing underscores to hyphens?

For example:

type ChangeHyphensToUnderscore<T> = { [P in keyof T & string as `${Join(Split<P, '-'>, '_')}`]: T[P] };

Answer 1

Sure there is:

type Stringable = string | number | bigint | boolean | null | undefined;

type Join<A, Sep extends string = ""> = A extends [infer First, ...infer Rest] ? Rest extends [] ? `${First & Stringable}` : `${First & Stringable}${Sep}${Join<Rest, Sep>}` : "";

You can also improve performance slightly by utilizing tail call optimization:

type Join<A, Sep extends string = "", R extends string = ""> = A extends [infer First, ...infer Rest] ? Join<Rest, Sep, R extends "" ? `${First & Stringable}` : `${R}${Sep}${First & Stringable}`> : R;

Here's a playground for you to play.