Nullable types are essential in TypeScript, allowing developers to manage scenarios where values might be null or undefined. An improper handling can lead to bugs, particularly in large, dynamic applications. This article provides an in-depth understanding about nullable types in TypeScript, including what they are, how to use them, and best practices with practical examples.

What Are Nullable Types?

A nullable type refers to a type that can either hold a value of a specific type or be null or undefined. In TypeScript, null and undefined are distinct types but are often handled similarly when combined with other types.

By default, TypeScript assumes that values are non-nullable, meaning variables cannot be assigned null or undefined unless explicitly specified.

For example:

let myString: string = "Hello, TypeScript!";

myString = null; // Error: Type 'null' is not assignable to type 'string'. // [!code error]

We can make a type nullable by using a union type:

// [!code word:|:1]
let nullableString: string | null = "Hello!";

nullableString = null; // Works fine.

Why Use Nullable Types?

Nullable types provide:

  1. Explicitness
    They make it clear when a value might be absent, reducing ambiguity.
  2. Safety
    Avoids runtime errors by catching potential null dereferences at compile time.
  3. Flexibility
    Useful in cases where a value can be conditionally available.

Enabling strictNullChecks

In TypeScript, strictNullChecks compiler option enforces strict handling of null and undefined.

When enabled, TypeScript compiler prevents assigning null or undefined to variables unless explicitly declared.

Enable it in your tsconfig.json:

{
  "compilerOptions": {
    "strictNullChecks": true  // [!code highlight]
  }
}

Common Scenarios and Examples

1. Declaring Nullable Types

We can explicitly declare nullable variables using union type:

let age: number | null = 25;

age = null; // Valid

This ensures we can handle null values in a safe way.

2. Optional Properties

TypeScript allows properties to be optional using the ? syntax, marking them nullable:

type User = {
  name: string;
  // [!code word:?:1]
  age?: number; // Equivalent to age: number | undefined
};

const user1: User = { name: "Alice" };
const user2: User = { name: "Bob", age: 30 };

3. Nullable Parameters

Function parameters can also be nullable:

function greet(name: string | null): void {
  if (name) {
    console.log(`Hello, ${name}!`);
    
    return;
  }
  
  console.log("Hello, stranger!");
}

greet("John"); // Output: Hello, John!
greet(null);   // Output: Hello, stranger!

Avoiding Pitfalls

The Bad: Ignoring Nullable Types

Failing to handle null type can lead to runtime errors:

function getLength(value: string | null): number {
  return value.length; // Error: Object is possibly 'null'.
}

The Good: Handling null Explicitly

Checking for null type before accessing properties:

function getLength(value: string | null): number {
  if (value === null) {
    return 0; // Return a default value for `null`.
  }
  return value.length;
}

The Better: Using Optional Chaining

Using optional chaining operator (?.) to simplify nullable checks:

function getLength(value: string | null): number {
  // [!code word:?:1]
  return value?.length ?? 0; // Returns the length or 0 if `value` is null.
}

Working with Non-Nullable Assertions

TypeScript offers the non-null assertion operator (!) to tell the compiler a value is not nullish (neither null or undefined).

Use it with caution since this bypasses compile-time checks
function printLength(value: string | null) {
  // [!code word:!.:1]
  console.log(value!.length); // Assumes `value` is never null (unsafe if not validated).
}

Best Practices for Nullable Types

1 - Prefer strictNullChecks
Always enable this flag for safer type handling.

2 - Avoid Overusing Non-Null Assertions
Only use it when really needed in order to maintain type safety.

3 - Use Default Value
Provide default values where possible to minimize null checks:

function greet(name: string | null = "Guest") {
  console.log(`Hello, ${name}!`);
}

4 - Optional Chaining and Nullish Coalescing Operators
Use ?. and ?? for concise, safe code.

Complete Example: Combining Techniques

Here’s a comprehensive example demonstrating good practices with nullable types:

type Product = {
  id: number;
  name: string;
  description?: string; // Optional property
};

function getProductDetails(product: Product | null) {
  if (!product) {
    return "No product found.";
  }

  const description = product.description ?? "No description available.";

  return `Product: ${product.name}\nDescription: ${description}`;
}

const product1: Product = { id: 1, name: "Laptop" };
const product2: Product = { id: 2, name: "Phone", description: "Smartphone" };

console.log(getProductDetails(product1)); 
// Output:
// Product: Laptop
// Description: No description available.

console.log(getProductDetails(product2));
// Output:
// Product: Phone
// Description: Smartphone.

console.log(getProductDetails(null));
// Output: No product found.

Conclusion

Nullable types are a powerful feature in TypeScript that, when used correctly, enhance code readability, safety, and flexibility. By leveraging features like strictNullChecks, optional chaining, and nullish coalescing operators, we can write cleaner and more robust applications.

Whether you're new to TypeScript or an experienced developer, mastering nullable types is key to build runtime error-free and maintainable applications.

Start implementing these best practices today and take your TypeScript skills to the next level!