· best practices

Improve your switch cases with TypeScript

In this tutorial, you will learn how to improve your switch statements and fix certain errors in TypeScript. The article provides tips and tricks, as well as a final code example. Some key takeaways include setting `noImplicitReturns` to `true`, creating a switch case for every valid value, defining a custom return type, and adding a default case to handle unexpected values.

In this tutorial Benny shows you simple techniques on how to improve your switch statements. Using the tips and tricks from the video, you will never miss a switch case again. You will also learn how to fix error TS2322, TS2366 and TS7030.

Contents

Video

Errors fixed in the video:

TS2322: Type 'undefined' is not assignable to type 'number'.

TS2366: Function lacks ending return statement and return type does not include 'undefined'.

TS7030: Not all code paths return a value.

Final Code

LoanCalculator.ts
export enum LoanTerm {
  ONE_YEAR = 'ONE_YEAR',
  TWO_YEARS = 'TWO_YEARS',
  THREE_YEARS = 'THREE_YEARS',
  FOUR_YEARS = 'FOUR_YEARS',
  FIVE_YEARS = 'FIVE_YEARS',
}
 
export interface Loan {
  term: LoanTerm;
  type: 'AUTO_LOAN' | 'HOME_LOAN' | 'REFINANCING';
}
 
export type InterestRate = 1.75 | 2.96 | 3.5 | 5;
 
export function getInterestRate(loan: Loan): InterestRate {
  switch (loan.term) {
    case LoanTerm.ONE_YEAR:
      return 1.75;
    case LoanTerm.TWO_YEARS:
    case LoanTerm.THREE_YEARS:
      return 2.96;
    case LoanTerm.FOUR_YEARS:
      return 3.5;
    case LoanTerm.FIVE_YEARS:
      return 5;
  }
}
 
const interestRate = getInterestRate({ term: LoanTerm.ONE_YEAR, type: 'AUTO_LOAN' });

Summary

  • Set noImplicitReturns to true in your tsconfig.json
  • Create a switch case for every valid value
  • Define a custom return type to narrow your function's return values
  • Create a default case to handle values that might slip in through using your TypeScript code from JavaScript code
Back to Blog