TypeScript type that is a list of possible strings which are keys of an object

Question

I have an object that looks something like this

palette: {
    black: "#000",
    white: "#fff",
    primary: {
      "50": "#somecolor",
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    grey: {
      "50": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
      "900": "#somecolor",
    },
    green: {
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    blue: {
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    pink: {
      "100": "#somecolor",
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    red: {
      "300": "#somecolor",
      "500": "#somecolor",
      "700": "#somecolor",
    },
    background: {
      "500": "#somecolor",
      "700": "#somecolor",
    }
}

I want to create a TypeScript type that is only a subset of some of the keys. My ideal type would look like const theme = ["blue", "green", "pink", "primary"] as const or type Theme = "blue" | "green" | "primary" | "pink"

I am unable to extract this type. The purpose of this type is to do things like: const currentColor = palette[theme][500] where theme is a variable that can be either the Theme or theme type from the above paragraph.

Not sure if it matters but I am in a NextJS + React Native environment.

How can I do this?

So, what's wrong with the possible solutions you mentioned?

k.tten
– k.tten

2022-11-13 05:52:40 +00:00
Commented Nov 13, 2022 at 5:52 — k.tten
– k.tten, Commented Nov 13, 2022 at 5:52
type PaletteKeys = keyof typeof palette Is that?

Tomoe
– Tomoe

2022-11-13 06:07:34 +00:00
Commented Nov 13, 2022 at 6:07 — Tomoe
– Tomoe, Commented Nov 13, 2022 at 6:07

Kamran Davar · Accepted Answer · 2022-11-13 06:07:14Z

you should use index of array like this: palette[theme[2]][500]

export default function Home() {
  type themeItemType = "blue" | "green" | "primary" | "pink";
  const theme: themeItemType[] = ["blue", "green", "pink", "primary"];
  console.log(palette[theme[2]][500]) //#somecolor

  return <div>{palette[theme[2]][500]}</div>;
}

const palette = {
  black: "#000",
  white: "#fff",
  primary: {
    "50": "#somecolor",
    "100": "#somecolor",
    "300": "#somecolor",
    "500": "#somecolor",
    "700": "#somecolor",
  },
  grey: {
    "50": "#somecolor",
    "300": "#somecolor",
    "500": "#somecolor",
    "700": "#somecolor",
    "900": "#somecolor",
  },
  green: {
    "100": "#somecolor",
    "300": "#somecolor",
    "500": "#somecolor",
    "700": "#somecolor",
  },
  blue: {
    "100": "#somecolor",
    "300": "#somecolor",
    "500": "#somecolor",
    "700": "#somecolor",
  },
  pink: {
    "100": "#somecolor",
    "300": "#somecolor",
    "500": "#somecolor",
    "700": "#somecolor",
  },
  red: {
    "300": "#somecolor",
    "500": "#somecolor",
    "700": "#somecolor",
  },
  background: {
    "500": "#somecolor",
    "700": "#somecolor",
  },
};

Jumpa · Accepted Answer · 2022-11-13 07:26:09Z

0

If I understand correctly, you want to to build a partial union out of the object keys. if that is the case, this should do the work

type PaletteKeys = keyof Partial<Record<keyof typeof palette, string>>

it will allow you to build the following unions:

type Union1 = 'blue' | 'green' | 'primary' | 'pink';
type Union2 = 'blue' | 'primary';
// and any other "Partial" union of the "palette" keys

edited Nov 13, 2022 at 7:26

answered Nov 13, 2022 at 6:16

Jumpa

9081 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

TypeScript type that is a list of possible strings which are keys of an object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related