In programming, we constantly need to make decisions. Should this code run? Is this user allowed to see that page? To make these decisions, we evaluate conditions, and the fundamental tools for this are logical operators. They are the building blocks of control flow in any language, including TypeScript.

Logical operators work with boolean values (true and false) to produce a single boolean result. Let’s dive into the three core logical operators you’ll use every day: Logical AND (&&), Logical OR (||), and Logical NOT (!).

1. Logical AND (&&)

The Logical AND operator, represented by &&, returns true only if both of its operands are true. If either operand is false, the result will be false.

Think of it like this: “I will go to the park if it is sunny and I have finished my work.” Both conditions must be met.

Truth Table for AND (&&)

As a TypeScript developer, you’ve almost certainly written code like if (myVariable) { ... } to check if a variable “exists” or has a “valid” value. But what’s really happening under the hood? This check isn’t just for null or undefined; it’s a core concept in JavaScript and TypeScript called “truthiness”.

Understanding the difference between truthy and falsy values is crucial for writing robust, bug-free code. It helps you avoid common pitfalls and write more concise, expressive logic. Let’s dive in!

What are Truthy and Falsy Values?

In TypeScript, every value has an inherent boolean quality. When used in a boolean context (like an if condition), a value will be coerced, or converted, into either true or false.

• A falsy value is a value that is considered false when encountered in a boolean context.
• A truthy value is any value that is considered true in a boolean context. Basically, if it’s not on the falsy list, it’s truthy!

If you’ve spent any time with modern JavaScript or TypeScript, you’ve likely encountered string concatenation. The traditional way, using the + operator, works, but it can quickly become clumsy, error-prone, and hard to read, especially when dealing with multiple variables and line breaks.

Fortunately, ES6 introduced a much more elegant and powerful solution: Template Strings (also known as template literals). TypeScript, being a superset of JavaScript, fully supports this feature, and it will fundamentally change the way you work with strings.

Let’s explore what makes them so special, from the basics to more advanced techniques.

What are Template Strings?

At their core, template strings are string literals that allow for embedded expressions. Instead of using single quotes (') or double quotes ("), you enclose them in backticks (`).

// Old way with single quotes
const singleQuoteString = 'This is a regular string.';

// Old way with double quotes
const doubleQuoteString = "This is also a regular string.";

// The modern way with backticks
const templateString = `This is a template string.`;

As developers, we often face scenarios where a variable or a function parameter could legitimately hold more than one type of value. Maybe an ID can be a number or a string, or a function can accept different but related object shapes. In vanilla JavaScript, we’d handle this with runtime checks, but in TypeScript, we can achieve this with full type safety using Union Types.

Let’s dive into what union types are, how to use them, and the powerful patterns they enable.

What are Union Types?

A union type allows you to define a type that can be one of several possible types. You create a union type by using the pipe (|) symbol between the types.

Think of it as an “OR” for types. A variable of type string | number can hold a value that is either a string or a number.