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.

interfaceUser {
  id:number;
  name:string;
  email?:string;
}

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

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

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

Both objects are valid because email is optional.

This works in type aliases as well:

typeSettings= {
  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

interfaceContact {
  name:string;
  phone?:string;
  website?:string;
}

constcontact:Contact= {
  name:"Taylor"
};

Only name is required.

Example 2: Flexible API model

interfaceApiUser {
  id:number;
  username:string;
  avatarUrl?:string;
}

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

avatarUrl may or may not be included in the response.

Example 3: Configuration object

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

constconfig: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:

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

Why it breaks: email may be undefined.

Correct approach:

functionprintEmail(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:

interfaceOrder {
  id?:number;
  total?:number;
}

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

Correct approach:

interfaceOrder {
  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