Q7 of 38 · TypeScript
How do optional and default parameters work in TypeScript?
Short answer
Short answer: Optional parameters use `?` after the name and add `undefined` to their type. Default parameters use `= value` and are implicitly optional — callers can omit them or pass `undefined` to get the default. Optional params must come after required ones; default params may appear anywhere.
Detail
TypeScript provides two ways to make function parameters non-mandatory.
Optional parameters (param?): Appending ? makes a parameter optional. Its type is automatically widened to include undefined. Inside the function you must check for undefined before using it. Optional parameters must follow all required parameters.
Default parameters (param = value): Provide a fallback value used when the argument is omitted or explicitly passed as undefined. TypeScript infers the type from the default value. Default parameters can appear before required ones in theory, but callers would then need to pass undefined to skip them — put optional defaults last for clarity.
Optional vs default:
- Optional (
?): caller may omit; callee receivesundefined - Default: caller may omit or pass
undefined; callee receives the default value
In test automation: Optional parameters are common in helper functions: clickButton(selector: string, timeout?: number). Default parameters reduce boilerplate in factory functions for test data.
Optional object properties: In interfaces and types, ?: marks a property optional: interface Config { timeout?: number }. Use Required<T> or Partial<T> utility types to transform between all-required and all-optional variants.
// EXAMPLE
// Optional parameter — must check undefined inside
function click(selector: string, timeout?: number) {
const ms = timeout ?? 5000; // fallback to 5000 if undefined
// ...
}
click("#submit"); // ok — timeout is undefined
click("#submit", 3000); // ok
// Default parameter — callee always gets a value
function click2(selector: string, timeout = 5000) {
// timeout: number, always 5000 if omitted
}
click2("#submit"); // timeout = 5000
click2("#submit", undefined); // also timeout = 5000
click2("#submit", 3000); // timeout = 3000
// Optional object property
interface TestUser {
name: string;
email?: string; // may be absent
}
const user: TestUser = { name: "Alice" }; // valid
// Partial and Required utility types
type AllRequired = Required<TestUser>; // email no longer optional
type AllOptional = Partial<TestUser>; // name also optional