Access deeper parts of objects and arrays

You can do really interesting things with TypeScript using indexed access types, which gives you access to deeper parts of an object or an array. Here we're accessing the primary color just by passing. in primary into this access point here.

type PrimaryColor = ColorVariants["primary"] 

And we can also access it via a union too. Where we can say color variants secondary or tertiary and get a union back from here too.

type NonPrimaryColor = ColorVariants["secondary" | "tertiary"] 

We can even pass in a bigger union where we say the keyof the ColorVariants, passing all of them in, and then we suddenly get every single color there too.

type EveryColor = ColorVariants[keyof ColorVariants] 

We can do the same thing with tuples where we have this array of letters. And, then we have AOrB, where we pass in an array of or a union of numbers. And then we have Letter, which is now just a union of all of the numbers, so we get every member of the array back.

type Letters = ["a", "b", "c"]:

type AOrB = Letters[0 | 1];
type Letter = Letters[number];

Finally we can do this with deep accessed objects and we can combine them. So here a Role is a UserRoleConfig where we pass in a keyof UserRoleConfig,which accesses both user and superAdmin. And then, [number], which returns all of the members of each array.

interface UserRoleConfig {
  user: ["view", "create", "update"]
  superAdmin: ["view", "create", "update", "delete"]
}

type Role = UserRoleConfig[keyof UserRoleConfig][number]

You can imagine this going further and further down. TypeScript is so incredibly powerful here and we end up with just a simple union of numbers.