How to Declare Nullable Types in TypeScript Interfaces

By the end of this page, you will understand how nullable types work in TypeScript, how to declare a property such as salary as null, and how this differs from making a property optional. You will also learn common patterns, mistakes, and practical examples for working with null, undefined, and union types in TypeScript.

In TypeScript, a type is made nullable by using a union type. A union type means a value can be one of several allowed types.

For example:

salary: number | null;

This means salary can hold either:

• a number
• or null

That is the TypeScript way to represent nullable values.

This matters because real programs often deal with incomplete or missing data:

• a salary may not be known yet
• a database field may contain NULL
• an API may return null
• a form field may be intentionally cleared

TypeScript helps you model these cases safely.

A very important detail is the difference between these ideas:

• nullable: the property exists, but its value may be null
• optional: the property may be missing entirely

For example:

interface Employee {
  salary: number | ;
}

Think of a property like a box with a label.

• salary: number means the box must contain a number.
• salary: number | null means the box must exist, but it may contain either a number or an explicit "empty" value.
• salary?: number means the box might not be there at all.

So:

• null = the box exists, but it is intentionally empty
• undefined or optional = the box may be absent

This mental model helps when designing interfaces for APIs, database records, and user input.

The basic syntax for a nullable property in TypeScript is:

interface Employee {
  id: number;
  name: string;
  salary: number | null;
}

Example: nullable property

interface Employee {
  id: number;
  name: string;
  salary: number | null;
}

const e1: Employee = {
  id: 1,
  name: "Ava",
  salary: 50000
};

const e2: Employee = {
  id: 2,
  name: "Liam",
  salary: null
};

Both objects are valid because salary can be either a number or null.

Consider this example:

interface Employee {
  id: number;
  name: string;
  salary: number | null;
}

const employee: Employee = {
  id: 1,
  name: "Mia",
  salary: null
};

if (employee.salary !== null) {
  console.log(employee.salary.toFixed(2));
} else {
  console.log("No salary yet");
}

What happens step by step

1. The interface says salary can be a number or null.
2. The employee object is created with salary: null.
3. The if statement checks whether is not .

Nullable types are common in real applications.

Database records

A column such as salary, middleName, or deletedAt may be NULL in a database.

interface EmployeeRecord {
  id: number;
  salary: number | null;
}

API responses

An API may return null for fields that are known but currently empty.

interface UserProfile {
  bio: string | null;
}

Forms

A user may clear an input, which may be represented as null before saving.

interface FormState {
  age: number | null;
}

Scheduling and timestamps

In real projects, developers often use nullable types together with checks, defaults, and validation.

Guard clauses

A common pattern is to return early if a nullable value is missing.

function getAnnualSalary(employee: Employee): number | null {
  if (employee.salary === null) {
    return null;
  }

  return employee.salary * 12;
}

Default values

Sometimes developers convert null to a fallback value.

function getSalaryDisplay(employee: Employee): string {
  return employee.salary ?? 0 + "";
}

A clearer version is:

function getSalaryDisplay(: ):  {
   (employee. ?? );
}

1. Confusing nullable with optional

This means nullable:

interface Employee {
  salary: number | null;
}

This means optional:

interface Employee {
  salary?: number;
}

These are not the same.

• number | null => property must exist, value may be null
• salary? => property may be missing

2. Forgetting to check for null before using the value

Broken code:

interface Employee {
  salary: number | null;
}

function printSalary(employee: Employee) {
  console.log(employee.salary.toFixed());
}

// Nullable property
interface Employee {
  salary: number | null;
}

// Optional property
interface Employee {
  salary?: number;
}

// Optional + nullable
interface Employee {
  salary?: number | null;
}

Rules

• Use | null when a property may explicitly hold null
• Use ? when a property may be omitted
• Use both if the property may be omitted or null
• Check nullable values before calling methods on them
• Prefer strictNullChecks or strict: true

Common checks

if (employee.salary !== null) {
  console.log(employee.salary);
}

How do I make a field nullable in TypeScript?

Use a union type:

salary: number | null;

Is salary?: number the same as salary: number | null?

No. salary?: number means the property can be missing. salary: number | null means the property must exist, but its value can be null.

Can a TypeScript property be both optional and nullable?

Yes:

salary?: number | null;

What is the TypeScript equivalent of C# int??

The closest equivalent is:

number | null

Should I use null or undefined in TypeScript?

Use whichever best matches your data model. null usually means intentionally empty. usually means missing or not assigned.

• Union types — Nullable types in TypeScript are created using unions such as number | null.
• Optional properties — Important because salary?: number is different from a nullable property.
• null vs undefined — Helps you choose the correct representation for missing data.
• Type narrowing — Needed to safely use a value after checking whether it is null.
• Strict null checks — Controls how carefully TypeScript enforces null and undefined handling.
• Interfaces in TypeScript — Nullable fields are commonly declared inside interfaces.
• Nullish coalescing (??) — Useful for providing default values when a nullable field is null or undefined.