Nullable Types in TypeScript

Nullable types in TypeScript allow a variable to hold either a specific type or null or undefined. This helps represent situations where a value might be absent or missing, and provides better safety and clarity in handling such cases.

 

Key Concepts of Nullable Types

• Nullable Types allow a variable to be assigned null or undefined, in addition to the specified type.
• TypeScript provides null and undefined as valid values for all types, but you need to explicitly declare variables as nullable.
• You can use the null and undefined types to denote the absence of a value.

 

Example Usage of Nullable Types

Example 1: Using null and undefined

let name: string | null = null;
let age: number | undefined = undefined;

name = "John";  // valid
age = 30;       // valid

Here:

• The name variable can either be a string or null.
• The age variable can either be a number or undefined.

Example 2: Declaring Nullable Variables

let isAvailable: boolean | null = null;
let address: string | null = "123 Main St.";

isAvailable = true;   // valid
address = null;       // valid

In this example:

• The isAvailable variable is either a boolean or null.
• The address variable can be a string or null.

 

Nullable Types in Function Parameters

Nullable types are commonly used in function parameters to specify that a parameter may or may not be provided (i.e., it could be null or undefined).

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

console.log(greet("John"));  // Output: Hello, John!
console.log(greet(null));    // Output: Hello, Guest!

In this example:

• The name parameter can either be a string or null.
• The function behaves differently depending on whether the value is null or a valid string.

 

Nullable Types with Arrays

Nullable types can be used with arrays to specify that an array element may be null or undefined.

let numbers: (number | null)[] = [1, 2, null, 4];

numbers.forEach(num => {
  if (num !== null) {
    console.log(num * 2);
  }
});

Here:

• The numbers array can contain either number values or null.
• The forEach loop checks if an element is null before performing operations on it.

 

Using undefined for Optional Parameters

In TypeScript, when you want to indicate that a function parameter is optional, you can use undefined in combination with the | operator.

function setAge(age: number | undefined): void {
  if (age === undefined) {
    console.log("Age not provided");
  } else {
    console.log(`Age is ${age}`);
  }
}

setAge(25);         // Output: Age is 25
setAge(undefined);  // Output: Age not provided

Here:

• The age parameter can be a number or undefined, indicating that the parameter may not be provided when the function is called.

 

Nullable Types with null vs undefined

In TypeScript, null and undefined are two distinct types. While both represent the absence of a value, null is typically used to indicate an explicitly missing value, whereas undefined often indicates that a variable has not been assigned a value.

let value1: string | null = null;       // explicitly no value
let value2: string | undefined = undefined;  // not assigned yet

• Use null when you want to explicitly set a value to be missing.
• Use undefined when a value has not been set or initialized.

 

Using the strictNullChecks Flag

When the strictNullChecks flag is enabled in TypeScript's tsconfig.json, null and undefined are treated as distinct types. Without this flag, null and undefined are assignable to any type, which can lead to potential issues.

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

With strictNullChecks:

• You need to explicitly handle null and undefined.
• It prevents potential errors from unhandled nullable values.

Example with strictNullChecks

let userName: string = null;  // Error: Type 'null' is not assignable to type 'string'.

Without strictNullChecks, this would have been valid. With it enabled, TypeScript enforces that null can only be assigned to a variable of type null or undefined.

 

Nullable Types with Type Guards

You can use type guards (e.g., if statements) to narrow down the type and check if a variable is null or undefined before using it.

function printLength(str: string | null): void {
  if (str === null) {
    console.log("No string provided.");
  } else {
    console.log(`String length is ${str.length}`);
  }
}

printLength(null);        // Output: No string provided.
printLength("Hello");     // Output: String length is 5

In this example:

• The type guard checks if str is null before attempting to access its length property.

 

Summary

• Nullable Types: In TypeScript, you can explicitly specify that a variable or parameter can be null or undefined in addition to the normal type.
• null vs undefined: null represents an explicitly missing value, while undefined indicates a value that has not been initialized.
• Type Guards: You can use type guards to safely handle null or undefined values.
• strictNullChecks: With this flag enabled, null and undefined are distinct types and require explicit handling in TypeScript.