TypeScript if-else Condition

Back to: TypeScript Tutorial

TypeScript is a strongly typed superset of JavaScript that adds optional static typing, classes, and interfaces. It is a popular choice among developers for building complex web applications because it helps to catch errors at compile-time rather than run-time. In this lesson, we will focus on the best readable style for writing if-else conditions in TypeScript.

The basic syntax for if-else conditions in TypeScript is the same as in JavaScript:

if (condition) {
  // code to be executed if the condition is true
} else {
  // code to be executed if the condition is false
}

To make if-else conditions more readable in TypeScript, we can follow some best practices:

Use meaningful variable and function names: Use descriptive names for variables and functions so that it is easier to understand what they represent. For example, instead of using x as a variable name, use something more meaningful like age or count.

Avoid nesting if-else conditions: Nesting if-else conditions can make the code difficult to read and understand. Instead, use early returns to reduce the level of nesting. For example:

function calculateGrade(score: number): string {
  if (score >= 90) {
    return "A";
  }

  if (score >= 80) {
    return "B";
  }

  if (score >= 70) {
    return "C";
  }

  if (score >= 60) {
    return "D";
  }

  return "F";
}

Use the ternary operator for simple conditions: For simple conditions, use the ternary operator (condition ? value1 : value2) instead of if-else conditions. This can make the code more concise and easier to read. For example:
```
const isAdmin = user.role === "admin" ? true : false;
```

Use type guards for type checking: Use type guards to check if a variable has a certain type before performing an operation on it. This can help avoid runtime errors. For example:

interface Person {
  name: string;
  age: number;
}

function greet(person: Person | null) {
  if (person === null) {
    console.log("Hello, stranger!");
  } else {
    console.log(`Hello, ${person.name}!`);
  }
}

In conclusion, writing readable if-else conditions in TypeScript involves using meaningful variable and function names, avoiding nesting, using the ternary operator for simple conditions, and using type guards for type checking. By following these best practices, your code will be easier to understand and maintain.

Stay Connected