> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TypeScript If Statement
The `if` statement is a fundamental control flow construct that evaluates a conditional expression and executes a corresponding block of code only if the expression resolves to a truthy value. In TypeScript, `if` statements are deeply integrated with the compiler's control flow analysis, enabling automatic type narrowing within the execution block based on type guards.
## Syntax
```typescript theme={"dark"}
if (condition) {
// Executes if condition is truthy
} else if (alternativeCondition) {
// Executes if alternativeCondition is truthy
} else {
// Executes if all preceding conditions are falsy
}
```
## Expression Evaluation
TypeScript evaluates the `condition` expression by coercing the result to a boolean. Values are categorized as either *falsy* (`false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, and `NaN`) or *truthy* (all other values).
The TypeScript compiler fully permits implicit truthiness coercion in `if` statements. When compiler options like `strictNullChecks` are enabled, the type system ensures that `null` and `undefined` are strictly accounted for. The `if` statement acts as the primary mechanism to handle these constraints, allowing developers to safely filter out nullish values from a union type through standard truthiness checks or explicit comparisons.
## Control Flow Analysis and Type Narrowing
The primary distinction of the `if` statement in TypeScript compared to standard JavaScript is its role in the static type system. When an `if` statement contains a type guard (e.g., `typeof`, `instanceof`, `in`, equality checks, or custom type predicates), the TypeScript compiler performs control flow analysis to narrow a union type to a more specific type within the lexical scope of the `if` block.
```typescript theme={"dark"}
function processValue(value: string | number | boolean) {
if (typeof value === "string") {
// Compiler narrows 'value' to type 'string'
value.toUpperCase();
} else if (typeof value === "number") {
// Compiler narrows 'value' to type 'number'
value.toFixed(2);
} else {
// Compiler infers 'value' as type 'boolean' through exhaustive checking
value.valueOf();
}
}
```
## Short-Circuit Evaluation and Type Safety
When evaluating compound conditions using logical operators (`&&`, `||`), the `if` statement employs short-circuit evaluation. TypeScript's type checker maps this sequential evaluation, allowing safe property access or further type narrowing on objects if guarded by a preceding condition within the exact same expression.
```typescript theme={"dark"}
function processEvent(event: unknown) {
if (typeof event === "object" && event !== null && "type" in event) {
// The right side of && is only evaluated and type-checked
// if the left side proves 'event' is a non-null object.
// Inside this block, TypeScript narrows 'event' to an object containing a 'type' property.
}
}
```
## Discriminated Unions
TypeScript heavily relies on `if` statements to resolve discriminated unions (algebraic data types). By checking the literal type of a common discriminant property, the compiler narrows the broader union down to the specific object interface.
```typescript theme={"dark"}
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; sideLength: number };
function processShape(shape: Shape) {
if (shape.kind === "circle") {
// 'shape' is narrowed to the circle interface.
// shape.radius is accessible; shape.sideLength throws a compiler error.
}
}
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
