Optional and Default Parameters

Learning objectives#

• Mark parameters as optional with ?
• Give parameters default values
• Type rest parameters
• Type a destructured options object

Explanation#

name?: string makes a parameter optional. Inside the function its type is string | undefined, so you must handle undefined.

A default value (greeting = "Hello") also makes the parameter optional, and its type is inferred from the default — no undefined to handle.

Optional and defaulted parameters should come after required ones.

Rest parameters are typed as arrays: function sum(...nums: number[]).

For many options, use one typed object: function connect({ host = "localhost", port = 5432 }: ConnectOptions = {}).

Syntax#

1function greet(name: string, title?: string, greeting = 'Hello') { }
2function sum(...nums: number[]): number { }

Code example: Optional, default, rest and options#

1function fullName(first: string, last?: string): string {
2  // return first + ' ' + last.toUpperCase();   // ✗ 'last' is possibly 'undefined'
3  return last ? `${first} ${last}` : first;
4}
5

6function greet(name: string, greeting = 'Namaste'): string {
7  return `${greeting}, ${name}!`;          // greeting is string, never undefined
8}
9

10function sum(...nums: number[]): number {
11  return nums.reduce((a, b) => a + b, 0);
12}
13

14interface PaginateOptions {
15  page?: number;
16  pageSize?: number;
17  sort?: 'asc' | 'desc';
18}
19function paginate<T>(items: T[], { page = 1, pageSize = 10, sort = 'asc' }: PaginateOptions = {}): T[] {
20  const sorted = sort === 'asc' ? items : [...items].reverse();
21  return sorted.slice((page - 1) * pageSize, page * pageSize);
22}
23

24fullName('Asha');                       // 'Asha'
25greet('Ravi');                          // 'Namaste, Ravi!'
26sum(1, 2, 3);                           // 6
27paginate([1, 2, 3, 4, 5], { pageSize: 2, page: 2 });   // [ 3, 4 ]
28paginate([1, 2], { sort: 'random' });   // ✗ Type '"random"' is not assignable to type '"asc" | "desc" | undefined'

fullName('Asha') → 'Asha', greet('Ravi') → 'Namaste, Ravi!', sum → 6, paginate → [ 3, 4 ]. The invalid sort option is rejected.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. last?: string means callers can skip it; TypeScript forces a check before using it.
2. greeting has a default, so inside the function it is always a string.
3. ...nums: number[] collects any number of numeric arguments.
4. PaginateOptions makes every option optional; destructuring gives each a default.
5. = {} lets callers omit the options object entirely.
6. A wrong literal value inside the options is still caught.

Real-world use case#

Common mistakes#

Best practices#

• Prefer defaults over ? when a sensible default exists
• Use an options object once you have more than 2 optional parameters
• Always add = {} to an optional destructured options object
• Use ?? to supply defaults inside the function when needed

Remember this#

Practice exercise#

1interface DateOptions { locale?: string; withTime?: boolean }
2

3function formatDate(date: Date, { locale = 'en-IN', withTime = false }: DateOptions = {}): string {
4  return withTime ? date.toLocaleString(locale) : date.toLocaleDateString(locale);
5}
6formatDate(new Date(), { withTime: true });

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.