TypeScript — If Statement: Build Reliable Conditional Logic with Type Safety

Introduction – Understanding the if Statement in TypeScript

The if statement is a foundational tool used to make decisions in your code. In TypeScript, it works just like in JavaScript but comes with an added advantage: type narrowing. This means TypeScript can smartly determine a variable’s type depending on conditions, helping you write more reliable and type-safe logic.

This article will teach you how to:

• Use basic if, else, and else if structures
• Leverage type narrowing in conditional blocks
• Apply if statements with union types and guards
• Avoid common mistakes in conditional logic

Basic Structure of an if Statement

The if statement evaluates a condition. If it’s true, it runs a block of code. You can also add else or else if for additional conditions.

let temperature = 30;

if (temperature > 25) {
  console.log("It's warm outside.");
} else if (temperature < 10) {
  console.log("It's cold outside.");
} else {
  console.log("The weather is moderate.");
}

This checks the temperature and prints a message accordingly.

Type Narrowing with if Conditions

One of TypeScript’s superpowers is its ability to refine types based on conditional checks.

Example:

function display(value: number | string) {
  if (typeof value === "string") {
    console.log("String length:", value.length); // Type narrowed to string
  } else {
    console.log("Number:", value.toFixed(2)); // Type narrowed to number
  }
}

Explanation: TypeScript detects the condition and narrows the type inside each block automatically.

Checking Truthy and Falsy Values

Some values like false, 0, "", null, undefined, and NaN are considered falsy. Everything else is truthy.

Example:

function sayHello(name?: string) {
  if (name) {
    console.log(`Hello, ${name}`);
  } else {
    console.log("Hello, guest");
  }
}

If no name is provided, it defaults to greeting a guest.

Combining Conditions with Logical Operators

You can use && (AND) and || (OR) for compound conditions.

Logical AND:

if (user && user.isVerified) {
  console.log("Welcome back!");
}

Logical OR:

if (role === "admin" || role === "moderator") {
  console.log("Access granted");
}

Nested if Statements

You can write one if inside another, but keep it readable.

if (account) {
  if (account.balance > 0) {
    console.log("You have available funds.");
  }
}

Tip: Use early returns or combine conditions to avoid deep nesting.

Real-World Applications

• Validating user input: if (input.length === 0)
• Role-based access: if (user.role === "admin")
• API response checks: if (response.status === 200)
• Conditional rendering in UI components
• Safe object access with type checks

Common Mistakes and Fixes

Best Practices

• Use === and !== for strict equality
• Narrow types using typeof, instanceof, or in
• Handle all code paths—don’t skip default cases
• Keep conditions short and readable
• Use optional chaining or truthy checks when accessing deep properties

Summary – Key Takeaways

The if statement in TypeScript offers both simple decision-making and advanced type-safe branching. It lets you write conditional logic that’s not only functional but also protected by the compiler.

Recap:

• if, else if, and else guide the program flow based on conditions
• TypeScript narrows types within conditional blocks automatically
• Use logical operators to combine multiple checks
• Always write clear and complete condition handling

In action: Whether you’re building a UI or validating API responses, TypeScript’s if statement is your go-to tool for reliable logic.

FAQs – TypeScript If Statement

Does TypeScript enhance the if statement compared to JavaScript?
Yes. It performs type narrowing based on your conditions.

What is type narrowing?
It’s the ability to refine variable types based on logic—like checking typeof.

Should I use == or ===?
Use === for both type and value checks. It’s more predictable.

Can I combine multiple conditions in one if?
Yes, using && and ||.

Does if (variable) check for null and undefined?
Yes. Falsy checks cover both null and undefined.