How to Use Optional Properties in TypeScript

What you’ll build or solve

You’ll define object types where some properties may be omitted.

When this approach works best

Optional properties work best when you:

• Model API responses where some fields may be missing
• Define form data where not all inputs are required
• Create configuration objects with only a few mandatory fields

They also help when designing update payloads that modify only some values.

This is a bad idea if a field must always exist. Marking required data as optional can hide real errors.

Prerequisites

• TypeScript installed
• A .ts file
• Basic understanding of interfaces and object types

Step-by-step instructions

Step 1: Mark a property as optional with ?

Add a question mark after the property name inside an interface or type alias.

interface User {
  id: number;
  name: string;
  email?: string;
}

Here, email is optional. Objects can include it or leave it out.

const user1: User = {
  id: 1,
  name: "Alex"
};

const user2: User = {
  id: 2,
  name: "Jordan",
  email: "jordan@example.com"
};

Both objects are valid because email is optional.

This works in type aliases as well:

type Settings = {
  theme?: string;
  notifications?: boolean;
};

The syntax is the same. Add ? after the property name to make it optional.

What to look for

• Use propertyName?: Type to declare an optional property
• Optional properties may be undefined
• The property itself may be missing from the object
• Handle optional values safely with conditionals or optional chaining
• Provide defaults when needed, for example user.email ?? "default"
• bio? differs from bio: string | undefined because optional means the property may not exist at all
• Keep required fields non-optional to avoid silent bugs

Examples you can copy

Example 1: Optional contact information

interface Contact {
  name: string;
  phone?: string;
  website?: string;
}

const contact: Contact = {
  name: "Taylor"
};

Only name is required.

Example 2: Flexible API model

interface ApiUser {
  id: number;
  username: string;
  avatarUrl?: string;
}

const apiUser: ApiUser = {
  id: 10,
  username: "sam_dev"
};

avatarUrl may or may not be included in the response.

Example 3: Configuration object

type AppConfig = {
  apiUrl: string;
  timeout?: number;
  debug?: boolean;
};

const config: AppConfig = {
  apiUrl: "https://api.example.com"
};

Only apiUrl is required. Other fields are optional.

Common mistakes and how to fix them

Mistake 1: Accessing an optional property without checks

You might write:

function printEmail(user: User) {
  console.log(user.email.toLowerCase());
}

Why it breaks: email may be undefined.

Correct approach:

function printEmail(user: User) {
  if (user.email) {
    console.log(user.email.toLowerCase());
  }
}

Add a conditional check before using the value.

Mistake 2: Making required data optional

You might write:

interface Order {
  id?: number;
  total?: number;
}

Why it breaks: If id and total must always exist, marking them optional hides real problems.

Correct approach:

interface Order {
  id: number;
  total: number;
}

Only mark properties optional when they are truly optional.

Troubleshooting

• If TypeScript says a property may be undefined, confirm it is marked optional and add a check before using it.
• If an object fails type checking, verify that all required properties are included.
• If optional properties behave unexpectedly, check that strict null checks are enabled in your TypeScript configuration.

Quick recap

• Add ? after a property name to make it optional
• Optional properties may be missing or undefined
• Only mark fields optional when they are not required
• Use conditionals or optional chaining when accessing them
• Keep required properties strict to maintain type safety