Access deeper parts of objects and arrays

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!

Discuss on Twitter

Transcript

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.

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.

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.

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.

TypeScript is so incredibly powerful here, and we end up with just a simple union of members.

More Tips