Skip to content

Generic typings #16

@TheOnlyBeardedBeast

Description

@TheOnlyBeardedBeast

Hi guys, thanks for the good work.

I noticed that every color has its own type generated while a generic type could be made.

type ColorScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type ColorShadeKeys<T extends string> = `${T}${ColorScale}`;
type ColorShades<T extends string> = Record<ColorShadeKeys<T>, string>;

example usage ColorShades<"slate">

I use these generics in a function to generate right typings for color name transformation. (using same name for a neutral color but using different colors in different themes with stiches)

export const transformColor = <TIn extends string, TOut extends string>(
  colors: ColorShades<TIn>,
  from: TIn,
  to: TOut
) =>
  Object.entries(colors).reduce((acc, [key, value]) => {
    acc[key.replace(from, to)] = value as string;
    return acc;
  }, {} as ColorShades<TOut>);

example usage transformColor(slateDark, 'slate', 'neutral')

Not sure if all this helps anyway, but it could reduce the generated typing file sizes, at least.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions