Assign local variables to default generic slots to dry up your code and improve performance
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.
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
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