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}` ? U : 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.

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

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

2 mins

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