How to set an interface from object values avoiding string type

user_15958741 0
Viewed 74

Let's sit you in context. I am declaring a constant named COLORS:

type Colors = 'BLUE_GRAY' | ...
type ColourUnit = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
type ColorsType = Record<Colors, Record<ColourUnit, string>>

export const COLORS: ColorsType = {
  BLUE_GRAY: {
    50: '#F8FAFC',
    100: '#F1F5F9',
    200: '#E2E8F0',
    300: '#CBD5E1',
    400: '#94A3B8',
    500: '#64748B',
    600: '#475569',
    700: '#334155',
    800: '#1E293B',
    900: '#0F172A'
  },

  ...
}

What I am trying to do is to generate an interface from all the values of the colors. In this case, the interface should be like the example under this, but obviously without typing all the colours again:

type Color = '#F8FAFC' | '#F1F5F9' | ... | '#0F172A'

I am doing this because I want to use them in a React component like this, and only use COLORS.COLOR[COLOR_UNIT], and not pass a string or anything else:

    <Container render="main" grow background={COLORS.GRAY[50]} _css={page}>
      {children}
    </Container>

The problem is that typescript is assigning string not the fixed values of the colors. I am trying this approach:

type Colour = typeof COLORS[keyof typeof COLORS][ColourUnit]

I know I can use an enum to do this, but it's not the point for this example, because I want the constant COLORS to always have X colors, and print an error when coding if anyone is missing and it's not possible to assign an interface to an enum. I know too that I can write a rest, but it's not the point.

Any solution?

If I try this, the same happens

type Colour = typeof COLORS

Thank you very much.

typescript reactjs
1 Answers

Thanks yo jcalz this was answered very quickly. Read the comments for more details, but this is the code that resolves the issue:

type ColourKey = keyof typeof COLORS
const Colors = <T extends Record<Colors, Record<ColourUnit, string>>>(type: T) => type
const COLORS = Colors({
  BLUE_GRAY: {
    50: '#F8FAFC',
    100: '#F1F5F9',
    200: '#E2E8F0',
    300: '#CBD5E1',
    400: '#94A3B8',
    500: '#64748B',
    600: '#475569',
    700: '#334155',
    800: '#1E293B',
    900: '#0F172A'
  },
} as const)

type Colour = typeof COLORS[ColourKey][ColourUnit]

Now using the type Colour I can choose between the options of the object without loosing any information.

Thanks again buddy @jcalz.

user_159587410
Related