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.
Transcript
0:00 You can do really interesting things with TypeScript, with indexed access types, which gives you access to deeper parts of an object or an array. Here, we're accessing the PrimaryColor, just by passing in primary into this like access point here. We can also access it via a union too, where we can say, ColorVariants, secondary or tertiary, and we get a union back from here too.
0:24 We can even pass in a bigger union, where we say, the keyof the ColorVariants, we pass all of them in, and then we suddenly get every single color there too.
0:33 We can do the same thing with tuples, where we have this array of letters here, and then we have AOrB where we pass in an array or a union of numbers, and then we have Letter here which is now just a union of all of the numbers. We get every member of the array back.
0:51 Finally, we can do this with deep accessed objects and we can combine them. Here, a Role is UserRoleConfig, where we pass in a keyof UserRoleConfig, which accesses both user and super admin, and then number here which returns all of the members of each of the array, and you can imagine this going further and further down.
1:13 TypeScript is so incredibly powerful here, and we end up with just a simple union of members.
Accessing object values and array members is MUCH more powerful in the type world than it is in the runtime world.
Passing a union... RETURNS a union!