Use infer in combination with string literals to manipulate keys of objects
We're getting this really weird data shape back from our API where it's prefixing everything with maps. That's kind of annoying.
interface ApiData { "maps:longitude": string "maps:latitude": string}
Ideally, we would be able to just remove maps from all of these attributes and just have longitude
and latitude
. So we've got a type helper here called RemoveMapsFromObj
, but it's not actually doing the thing.
type RemoveMapsFromObj<T> = { [K in keyof T]: T[K]}
So we need to somehow strip maps
from all of these prefixes. We can do that with a type helper. We'll make a type called RemoveMaps
that takes T
. We then check if T
extends the interpolated string, maps:${string}
, if it does we return 'blah'
, otherwise we return T
.
type RemoveMaps<T> = T extends `maps:${string}` ? "blah" : T
Now inside of RemoveMapsFromObj
we can do some remapping. We can say K in keyof T as RemoveMaps<K>
.
type RemoveMapsFromObj<T> = { [K in keyof T as RemoveMaps<K>]: T[K]}
It's actually going to be remapped to RemoveMaps
from K
because K
is going to be, as we're iterating over ApiData
object, the maps longitude maps latitude. But, there's an issue here, which is we're now just getting back "blah"
, right?.
So if I add something else to ApiData
interface ApiData { "maps:longitude": string "maps:latitude": string awesome: boolean}
That awesome
boolean would be added because that doesn't contain maps
so it doesn't trigger this blah
thing in RemoveMaps
. But we need to somehow extract the suffix of this maps section and return it where blah
is currently being returned.
We can do that with infer
. We'll say infer U
which is going to infer the rest of the string at that position.
type RemoveMaps<T> = T extends `maps:${infer U}` ? "blah" : T
And suddenly we end up with longitude and latitude as we're expecting!
Transcript
0:00 We're getting this really weird data shape back from our API where it's prefixing everything with maps, that's annoying. Ideally, we would be able to just remove maps from all of these attributes and just have longitude and latitude.
0:12 We've got a type helper here called RemoveMapsFromObj, but it's not actually doing the thing. It's just saying type design shape is "maps;longitude", "maps;latitude". We need to somehow strip maps from all of these prefixes. We can do that with a type helper.
0:27 We can say type RemoveMaps. We're first going to check if T extends 'maps;${string} ' ? 'blah'. Otherwise we'll return T. Now what we can do is inside RemoveMapsFromObj we can do some remapping here.
0:53 We can say (K in keyof T as RemoveMaps); because K is going to be as we're iterating over this object, this is going to be the "maps;longitude", "maps;latitude". There's an issue here, which is we're now just getting back 'blah'.
1:09 If I add something else in here, we would have something like awesome; boolean for instance. This would be added, because that doesn't contain maps. It doesn't trigger this 'blah' thing here, but we need to somehow extract the suffix of this maps section and return it here.
1:28 We can do that with infer. Infer, we're going to infer U, which is going to infer the rest of the string at that position. Suddenly we end up with longitude and latitude as we're expecting.
Still struggling with infer? How about this - you can use it in combination with string literals to manipulate keys of objects.
SUPER useful when you've got an external API you can't control giving you weird, non-JavaScripty keys.