Software Development

This TypeScript Problem will Challenge your Mind

Using Mapped Types to Filter Data

This TypeScript Problem will Challenge your Mind
This image has been generated by AI.
Join our Vibrant Discord Community for exclusive information and insightful discussions

TypeScript is a programming language filled with many surprises, both good and bad.

In this article, we look over a good surprise TypeScript offers, which is TypeScript Mapped Types.

We will discuss the use of Mapped Types to solve a realistic problem.

By the end, you will have grasped this concept fully, and gained the ability to apply this concept and directly improve your applications.

So without further ado, lets jump right in!


The Problem

Here we are using the country-to-currency package to represent mappings between Country Codes and a Currencies as follows:

“So… what is the problem?”

Well, it would be nice if we could return specific CountryCodes, based on an input Currency, all while maintaining type safety.

Let’s illustrate what I mean through this code:

Lets also visualize this problem using a diagram for better understanding:

Reverse Mapping Currencies with CountryCodes
Reverse Mapping Currencies with CountryCodes

We are essentially trying to reverse-map a currency to their corresponding country codes.


The Solution

It turns out there is an elegant solution for this using Mapped Types.

Mapped types allow you to create new types based on existing ones by applying a transformation to each property in the original type.

To achieve reverse-mapping from Currencies to CountryCodes, here is the logic we need to follow:

  1. Define a Mapped type.
  2. For each key (CountryCode) in our CountryToCurrency mappings, we check that the value corresponds to our input ThisCurrency.
  3. If it does, keep this property.
  4. It it doesn’t, remove this property by setting the key type as never.

And here is the code to make this happen:

  • We define a Mapped type called FilterMappingsFor which takes in ThisCurrency for which you want the country codes for.
  • We iterate through each CountryCode key.
  • For each CountryCode, compare the corresponding currency (CountryToCurrency[CountryCode]) to our input: ThisCurrency.
  • If the currencies match, keep the current property intact.
  • If they don’t match, set the key to never, which effectively removes the current property.

We are nearly done!

Currently, our FilterMappingsFor<ThisCurrency> type returns the correct mappings, but we only require the CountryCodes.

Lets define a new type CountryCodesFromCurrency to extract every key from our filtered mappings:

And finally, we may test this by defining a new types Result1 and Result2 as follows:


If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐

References