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

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.

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.

Now this second key is now going to extends keyof Obj[FirstKey].

And that means that when we select bar, this third argument is going to be c or d.

And when we select foo, it will be either a or b.

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.

Now the result is a Boolean. And if I change the third argument to b, then it becomes a number.

Transcript

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.

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.

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.

Discuss on Twitter

Use 'extends' keyword to narrow the value of a generic

Transcript

More Tips

Derive a union type from an object

Use 'in' operator to transform a union to another union

Decode URL search params at the type level with ts-toolbelt

Use function overloads and generics to type a compose function

Write your own 'PropsFrom' helper to extract props from any React component

Create your own 'objectKeys' function using generics and the 'keyof' operator

Use generics in React to make dynamic and flexible components

Create a 'key remover' function which can process any generic object

Throw detailed error messages for type checks

Use deep partials to help with mocking an entity

Create autocomplete helper which allows for arbitrary values

Turn a module into a type

Use 'declare global' to allow types to cross module boundaries

Use generics to dynamically specify the number, and type, of arguments to functions

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Map over a union type

Know when to use generics

Assign local variables to default generic slots to dry up your code and improve performance

Use assertion functions inside classes

Get a TypeScript package ready for release to NPM in under 2 minutes

Understand how TypeScript infers literal types

Ensure that all call sites must be given value

Access deeper parts of objects and arrays

Use infer in combination with string literals to manipulate keys of objects

Compare function overloads and generics

Understand assignability in TypeScript

Avoid unexpected behavior of React’s useState

Conform a Derived Type Without Losing Its Literal Values

TypeScript 5.0 Beta Deep Dive

Don't use return types, unless...