Optional Properties
In this page:
Declaring Optional Properties
Adding a question mark right after a property name inside an interface, like age?: number, makes that property optional. Objects satisfying the interface can then include or omit that property freely, without triggering a type error either way.
Example: Declaring Optional Properties
interface Profile {
username: string;
age?: number;
}
const profile: Profile = { username: "dev123" };
console.log(profile);Checking Optional Properties
Because an optional property might not be present at all, it should be checked for existence, typically with an if or the in operator, before it's used in code that requires it to have a value. Accessing it directly without that check yields a type that includes undefined.
Example: Checking Optional Properties
interface Profile {
username: string;
age?: number;
}
const profile: Profile = { username: "dev123" };
if ("age" in profile && profile.age !== undefined) {
console.log(profile.age);
} else {
console.log("Age not set");
}Optional Properties with Default Values
Functions that accept an object with optional properties can supply their own default value for any property the caller left out, often using destructuring with defaults. This lets the rest of the function work with a fully populated object regardless of what the caller actually provided.
Example: Optional Properties with Default Values
interface Options {
timeout?: number;
}
function connect({ timeout = 5000 }: Options) {
console.log(`Timeout: ${timeout}`);
}
connect({});Optional Methods
Interface methods can be marked optional in exactly the same way as data properties, using a question mark after the method name. This is useful for describing objects like event handlers where some callback hooks are supported but not mandatory.
Example: Optional Methods
interface Handlers {
onSave: () => void;
onCancel?: () => void;
}
const handlers: Handlers = { onSave: () => console.log("Saved") };
handlers.onCancel?.();
handlers.onSave();Optional Properties in Functions
Optional interface properties are especially useful for flexible configuration objects, where a caller only needs to specify the settings they want to override and can leave everything else at its default. This avoids forcing every caller to spell out every single option.
Example: Optional Properties in Functions
interface Config {
retries?: number;
verbose?: boolean;
}
function run(config: Config) {
console.log(config.retries ?? 3, config.verbose ?? false);
}
run({ verbose: true });Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: