Use 'extends' keyword to narrow the value of a generic
You can use the extends keyword to narrow the scope of a generic to make it more useful. Here for instance, we want to get a deep value from an object
const result = getDeepValue(obj, "bar", "d")
getDeepValue is gonna take in the object and then take in the two keys that it's gonna use to then grab the value. So we can use extends here to say the FirstKey needs to be keyof Obj, which is our object.
export const getDeepValue = <Obj, FirstKey extends keyof Obj, SecondKey>( obj: Obj, firstKey: FirstKey, secondKey: SecondKey) => { return {} as any}
And now we get some nice auto-complete on this deep value. Which is either foo or bar. Let's say it's bar for now.
const result = getDeepValue(obj, "bar", "d")
Now this second key is now going to extends keyof Obj[FirstKey].
export const getDeepValue = < Obj, FirstKey extends keyof Obj, SecondKey extends keyof Obj[FirstKey]>( obj: Obj, firstKey: FirstKey, secondKey: SecondKey) => { return {} as any}
And that means that when we select bar, this third argument is going to be c or d.
const result = getDeepValue(obj, "bar", "d")
And when we select foo, it will be either a or b.
const result = getDeepValue(obj, "foo", "a")
So let's say it's a for instance. We now need to work out what the result is going to be, because it's currently typed as any. So here in the return type definition we can just say Obj[FirstKey][SecondKey] just like property access in JavaScript.
export const getDeepValue = < Obj, FirstKey extends keyof Obj, SecondKey extends keyof Obj[FirstKey]>( obj: Obj, firstKey: FirstKey, secondKey: SecondKey): Obj[FirstKey][SecondKey] => { return {} as any}
Now the result is a Boolean. And if I change the third argument to b, then it becomes a number.
Transcript
0:00 You can use the extends keyword to narrow the scope of a generic to make it more useful. Here, for instance, we want to get a deep value from an object, and getDeepValue is going to take in the object and then take in the two keys that it's going to use to grab the value.
0:15 We can use extends here to say the FirstKey needs to be keyof Obj, which is our object. Now, we get some nice autocompletes on this deep value, which is either foo or bar. Let's say it's bar. This second key is now going to extends keyof Obj, FirstKey. That means that we get this bar. When we select bar, this is going to be C or D. When we select foo, this is going to be A or B.
0:47 Let's say it's A, for instance. We now need to work out what this result is going to be. It's currently typed as any. Here, we can say Obj, FirstKey, SecondKey, just like a property access is JavaScript. The result is a Boolean. If I change that to B, then it becomes a number.
The extends keyword is very powerful in TypeScript. Here, I use it to narrow the value of a generic to enable some beautiful autocomplete/inference.
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
Access deeper parts of objects and arrays
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 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