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!
More Tips
Type Predicates
1 min
TypeScript 5.1 Beta is OUT!
2 mins
How to Name your Types
4 mins
Don't use return types, unless...
4 mins
TypeScript 5.0 Beta Deep Dive
6 mins
Conform a Derived Type Without Losing Its Literal Values
1 min
Avoid unexpected behavior of React’s useState
1 min
Understand assignability in TypeScript
2 mins
Compare function overloads and generics
1 min
Use infer in combination with string literals to manipulate keys of objects
1 min
Ensure that all call sites must be given value
1 min
Understand how TypeScript infers literal types
1 min
Get a TypeScript package ready for release to NPM in under 2 minutes
1 min
Use assertion functions inside classes
1 min
Assign local variables to default generic slots to dry up your code and improve performance
2 mins
Know when to use generics
2 mins
Map over a union type
1 min
Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig
1 min
Use generics to dynamically specify the number, and type, of arguments to functions
1 min
Use 'declare global' to allow types to cross module boundaries
2 mins
Turn a module into a type
2 mins
Create autocomplete helper which allows for arbitrary values
2 mins
Use deep partials to help with mocking an entity
1 min
Throw detailed error messages for type checks
1 min
Create a 'key remover' function which can process any generic object
1 min
Use generics in React to make dynamic and flexible components
1 min
Create your own 'objectKeys' function using generics and the 'keyof' operator
1 min
Write your own 'PropsFrom' helper to extract props from any React component
1 min
Use 'extends' keyword to narrow the value of a generic
1 min
Use function overloads and generics to type a compose function
2 mins
Decode URL search params at the type level with ts-toolbelt
2 mins
Use 'in' operator to transform a union to another union
2 mins
Derive a union type from an object
2 mins