Lesson 6

Mastering Conditional Statements in TypeScript

Introduction and Topic Overview

Welcome to our TypeScript undertaking. Today, we are examining the concept of conditional statements. Much like life, TypeScript's conditional statements guide the program based on various conditions.

In today's lesson, we'll cover:

  • The basic if statement — the pathway for making single-pathway decisions.
  • else and else if statements — options for making multiple decision paths.
  • Compound conditionals — workarounds for handling complex decisions involving multiple conditions.
  • The Ternary Operator — a shorthand method for making quick, straightforward decisions.
Understanding Conditional Statements - The Basic If Statement

Our exploration starts with the basic if statement, which validates a particular condition and performs an action if the condition is fulfilled. To illustrate, imagine deciding whether a watermelon is ready to eat, here's what the if statement would look like :

1let watermelon: string = 'ready'; 2 3if (watermelon === 'ready') { 4 // If our watermelon is ready, the message is printed. 5 console.log("The watermelon is ready. It's time to enjoy."); 6} 7/* 8Prints: "The watermelon is ready. It's time to enjoy." 9*/

In the above code, the condition watermelon === 'ready' is evaluated. If it is true, the action inside the { ... } block is executed, which is console.log("The watermelon is ready. It's time to enjoy."); in this case.

Diving Deeper - Exploring Else and Else If Statements

What would happen if the watermelon is not ready? Here, we use the else statement, which specifies a different course to follow when the if condition is false.

To evaluate multiple conditions, we place an else if statement after the if statement and before the else statement. Here's an example of decision-making based on temperature:

1let temperature: number = -1; 2 3if (temperature > 0) { 4 console.log("Temperature is above freezing; let's go outside."); 5} 6else if (temperature === 0) { 7 console.log("Temperature is at the freezing point; better stay warm."); 8} 9else { 10 console.log("Temperature is below freezing; stay indoors."); 11} 12/* 13Prints: 14"Temperature is below freezing; stay indoors." 15*/

The code above prints "Temperature is below freezing; stay indoors.".

Raising The Decision Making Game - Compound Conditionals

What if we need to consider multiple conditions before making a decision? Compound conditional statements utilize logical operators (and - &&, or - ||) to combine conditions. A decision to go cycling based on multiple factors acts as a prime example:

1let temperature: number = 22; 2let isSunny: boolean = true; 3 4if (temperature > 20 && isSunny) { 5 // If both conditions hold true, the message is printed. 6 console.log("Weather is excellent. Let's go cycling!"); 7} 8/* 9Prints: "Weather is excellent. Let's go cycling!" 10*/
The Swift Decision Maker - TypeScript Ternary Operator

The Ternary Operator ? : is an ideal pick for quick if-else decisions. This shorthand expression verifies a condition, executing the code after ? if true or the code after : if false.

1let isSnowing: boolean = false; 2 3const message: string = isSnowing ? "Better wear warm clothes." : "No need for warm clothes."; 4 5console.log(message); // Prints: "No need for warm clothes."
Lesson Summary and Practice

Great job! Today, we learned about making decisions using TypeScript's conditional statements. We plunged into the basic if statements, explored else and else if branches, compound conditionals, and the shorthand ternary operator.

Next, it’s time for exercises! Fortify your comprehension by applying today's enriching lesson to multiple scenarios. Prepare for an upcoming deep dive into TypeScript types, interfaces, and more. Keep progressing!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.