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

You can do some really clever things with default parameters of generics and they can really help tidy up really complicated looking generic signatures.

Here we've got an object where what we wanna do is extract the values of the keys that start with a from this object. And so this union, NewUnion it's looking at the a, a2, a3 in our Obj.


export type Obj = {
a: "a"
a2: "a2"
a3: "a3"
b: "b"
b1: "b1"
b2: "b2"
}
type ValuesOfKeysStartingWithA<Obj> = {
[K in Extract<keyof Obj, `a${string}`>]: Obj[k]
}[Extract<keyof Obj, `a${string}`>]
type NewUnion = ValuesOfKeysStartingWithA<Obj>

And if I change a to "FOO", for example, it's extracting the values of those keys that start with A. But it's a pretty messy type signature because there's quite a bit of duplication here. In ValuesOfKeysStartingWithA we're extracting the key of the object, and we're saying we only want those keys that start with a.


type ValuesOfKeysStartingWithA<Obj> = {
[K in Extract<keyof Obj, `a${string}`>]: Obj[k]
}[Extract<keyof Obj, `a${string}`>]

And then we return the part of the object that corresponds to that key. And then we do it a second time because we need to map over the object in order to pull those values out.

We can actually reduce the duplication by saving it to a local variable.

And you might think, where on earth would I save it here? Well, you can stick it inside the default parameters of a new private generic.

So to start, I'll add the _ExtractedKeys type variable to ValuesOfKeysStartingWithA. And TypeScript is yelling at me, because it wants two type parameters.

But, I can actually set a default type parameter to _ExtractedKeys, and I can set it to:


Extract<keyof Obj, `a${string}`>

Now that our keys are extracted we can get rid of both instances of Extract and name them _ExtractedKeys instead.


type ValuesOfKeysStartingWithA<
Obj,
_ExtractedKeys = Extract<keyof Obj, `a${string}`>
> = {
[K in _ExtractedKeys]: Obj[k]
}[_ExtractedKeys]

But, we're going to get an error with our first use of _ExtractedKeys saying that it's is not assignable to type string or number or blah, blah, blah. That's because it takes the value from the type of the generic.

So if we add to our _ExtractedKeys generic and say it extends keyof Obj, then it starts working because we say _ExtractedKeys extends the key of the object.


type ValuesOfKeysStartingWithA<
Obj,
_ExtractedKeys extends keyof Obj = Extract<keyof Obj, `a${string}`>
> = {
[K in _ExtractedKeys]: Obj[k]
}[_ExtractedKeys]

This is now much easier to read and our union still stays the same.

Transcript

0:00 You can do some really clever things with default parameters of generics, and they can really help tidy up really complicated-looking generic signatures. Here, we've got an object where what we want to do is we want to extract the values of the keys that start with A from this object.

0:16 This union, it's looking at the A, A2, A3, just here, and if I change this to foo, for example, it's extracting the values of those keys that start with A. It's a pretty messy type signature, because there's quite a bit of duplication here. Here, we're extracting the key of the objects, and we're saying we only want those keys that start with A in them. Then we return the part of the object that corresponds to that key.

0:43 Here, we're also doing it a second time, because we need to then map over the object in order to pull those values out. We can do something about this and reduce the duplication by saving it to a local variable. You might think, "Where on Earth would I save it here?"

0:59 Well, you can stick it inside the default parameters of a new private generic. If I call this extracted keys here, you can see that this is yelling at me, because it requires two type parameters. If I give it a default type parameter here, I can actually pass extract in there.

1:20 Now, we've got our keys all extracted already. What we can do is we can now get rid of these, and we can name them extracted keys instead. Now, there's an error going on here, because extracted keys, it says, it's not assignable to type string, number, or blah, blah, blah.

1:36 That's because it takes the value from the type of this generic here. If we add to it, and we say it extends a key of obj, then it starts working, because we say, "OK, this extracted keys extends the key of the object." Sorry, my cats are fighting.

1:52 Then we can just start using it here. This is now much easier to read, and our union still says the same.

You can DRY up your generics code MASSIVELY (and improve perf) by assigning local variables to default generic slots.

Here, we move some complex 'Extract' logic to a generic slot, meaning it only gets calculated once.

Discuss on Twitter

More Tips

Play Type Predicates

Type Predicates

1 min

Play TypeScript 5.1 Beta is OUT!

TypeScript 5.1 Beta is OUT!

2 mins

Play How to Name your Types

How to Name your Types

4 mins

Play Don't use return types, unless...

Don't use return types, unless...

4 mins

Play TypeScript 5.0 Beta Deep Dive

TypeScript 5.0 Beta Deep Dive

6 mins

Play Conform a Derived Type Without Losing Its Literal Values

Conform a Derived Type Without Losing Its Literal Values

1 min

Play Avoid unexpected behavior of React’s useState

Avoid unexpected behavior of React’s useState

1 min

Play Understand assignability in TypeScript

Understand assignability in TypeScript

2 mins

Play Compare function overloads and generics

Compare function overloads and generics

1 min

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

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

1 min

Play Access deeper parts of objects and arrays

Access deeper parts of objects and arrays

1 min

Play Ensure that all call sites must be given value

Ensure that all call sites must be given value

1 min

Play Understand how TypeScript infers literal types

Understand how TypeScript infers literal types

1 min

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

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

1 min

Play Use assertion functions inside classes

Use assertion functions inside classes

1 min

Play Know when to use generics

Know when to use generics

2 mins

Play Map over a union type

Map over a union type

1 min

Play Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

1 min

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

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

1 min

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

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

2 mins

Play Turn a module into a type

Turn a module into a type

2 mins

Play Create autocomplete helper which allows for arbitrary values

Create autocomplete helper which allows for arbitrary values

2 mins

Play Use deep partials to help with mocking an entity

Use deep partials to help with mocking an entity

1 min

Play Throw detailed error messages for type checks

Throw detailed error messages for type checks

1 min

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

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

1 min

Play Use generics in React to make dynamic and flexible components

Use generics in React to make dynamic and flexible components

1 min

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

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

1 min

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

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

1 min

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

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

1 min

Play Use function overloads and generics to type a compose function

Use function overloads and generics to type a compose function

2 mins

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

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

2 mins

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

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

2 mins

Play Derive a union type from an object

Derive a union type from an object

2 mins