DEV Community

Cover image for Replace Switch statement with Record - Typescript

Posted on


Replace Switch statement with Record - Typescript

Table Of Contents


Hello coding dudes and dudesses! Hope you are all well and healthy. It's been quite a difficult time around the globe. I haven't been active for some time. I want to announce that I will communicate with you (through blogs) more often and try to tackle coding, engineering and business with you. Without further ado, let's get into it!



So, you probably came across a situation where you have something like this:

switch(someVariable: string) {
   case 'someValue': 
   case 'someOtherValue':
   case 'somethingElse':
Enter fullscreen mode Exit fullscreen mode

You probably did, right? Well, there is nothing wrong about this, It is perfectly correct way of replacing the If statement. But we can notice that this can also get a bit hard to follow and manage. With the power of TypeScript we can actually make this even simpler.


Let's consider that each case within the switch statement usually and in the best case has three lines of code.

case 'valueToCompareWith':       //first line
      someFunctionToExecute();  //line two
      break;                     //third line
Enter fullscreen mode Exit fullscreen mode

We have an assignment:

  • We should fetch some financial or product data using two different functions (handlers) that someone provided for us. Let's say getFinancialData() and getProductData().
  • For this occasion we are currently using the same indicator, let's call it dataHandlerIndicator and it will be of type 'financial' | 'product'.

Let's make a switch statement for this example

type DataType = 'financial' | 'product';
const dataHandlerFunction = (dataHandlerIndicator: DataType) => {
   switch(dataHandlerIndicator) {
      case 'financial':
      case 'product':
Enter fullscreen mode Exit fullscreen mode

So, for these two different DataType types we have 6 lines of code handling it and making it fairly easy to read. If we had 3 types we would have 9 lines of code, and for 10 different data types, well we all understand maths, we will have ~ 30 lines of code, maybe even more if we add some additional logic to the case statement.

Let's simplify this by using Record!

// functions to be called
const getFinancialData = () => {
    console.log('Fetch financial data...');

const getProductData = () => {
    console.log('Fetch product data...');
// end functions to be called ...

type DataType = 'financial' | 'product';

const getDataSelector: Record<DataType, () => void> = {
   'financial': getFinancialData,
   'product': getProductData

const dataHandlerFunction = (dataHandlerIndicator: DataType) => {

dataHandlerFunction('product'); // 'Fetch product data...'
dataHandlerFunction('financial'); // 'Fetch financial data...'
Enter fullscreen mode Exit fullscreen mode



Now, we can see that with the Record we have two lines of code describing the functions that will be called based on the DataType key value, and we have one line getDataSelector[dataHandlerIndicator]() that will call corresponding function based on the dataHandlerIndicator we pass to the function. Pretty neat, right!?

  • We reduced number of lines
  • Our code is much more readable
  • In order to add additional functionality, just update the Record with the new (key, value) pair, and that's it, you have a new selector for fetching new data based on the data type selector.


Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me!


Buy Me a Coffee at

Have a nice time hacking! 😊

Top comments (0)

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.