TypeScript - Optional And Default Parameters in Functions

Optional Parameters

In JavaScript all parameters in a function are optional. For example:

js-optional.js

function test(x, y) {
    console.log("x: " + x);
    console.log("y: " + y);
}

test();
test(1);

Output

x: undefined
y: undefined
x: 1
y: undefined

In TypeScript all parameters are required (non-optional). If we write above code in TypeScript:

ts-no-optional.ts

function test(x: number, y: number): void {
    console.log("x: " + x);
    console.log("y: " + y);
}

test();
test(1);
test(1, 2);

Output

ts-no-optional.ts(6,1): error TS2554: Expected 2 arguments, but got 0.
ts-no-optional.ts(7,1): error TS2554: Expected 2 arguments, but got 1.

Declaring Optional Parameter in TypeScript

In TypeScript we can make function's parameter optional by using '?'. This is similar to what we did in interfaces describing object properties tutorial.

ts-making-optional.ts

function test(x: number, y?: number): void {
    console.log("x: " + x);
    console.log("y: " + y);
}

test(1);
test(1, 2);

Output

x: 1
y: undefined
x: 1
y: 2

Any optional parameters must follow the required parameters. For example following will end up in compilation error:

ts-optional-param-wrong-ordering.ts

function test(y?: number, x: number): void {
    console.log("x: " + x);
    console.log("y: " + y);
}

Output

ts-optional-param-wrong-ordering.ts(1,27): error TS1016: A required parameter cannot follow an optional parameter.

Default Parameters

Same as JavaScript ES6 default parameters, TypeScript also supports default function parameter. In TypeScript, that even works for pre ES6 versions.

default-params.ts

function test(x: number, y: number = 3): void {
    console.log(`x= ${x}, y=${y}`);
}

test(2);
test(2, 5);

Output

x= 2, y=3
x= 2, y=5

The corresponding JavaScript when compiled with --target es6 flag:

default-params.js

function test(x, y = 3) {
    console.log(`x= ${x}, y=${y}`);
}
test(2);
test(2, 5);

The corresponding JavaScript when compiled without --target es6 flag:

function test(x, y) {
    if (y === void 0) { y = 3; }
    console.log("x= " + x + ", y=" + y);
}
test(2);
test(2, 5);

The default parameters can be declared in any order, for example:

default-params-any-order.ts

function test(x: number = 2, y: number) {
    console.log(`x= ${x}, y=${y}`);
}

test(undefined, 3);
test(4, 3);

Output

x= 2, y=3
x= 4, y=3

Optional/Default param Function type

Optional params can be included in the function type definition. For example:

optional-params-function-type.ts

let f: (x: number, y?: number) => void;

f = function (x: number, y?: number): void { //y is optional
    console.log(`x= ${x}, y=${y}`);
}
f(3);

Output

x= 3, y=undefined

Default params cannot be included in function type definition. For example:

let f: (x: number, y: number = 2) => void;

Output

default-params-function-type.ts(1,20): error TS2371: A parameter initializer is only allowed in a function or constructor implementation.

A function implementation having a default param can be assigned to a function type having corresponding param optional. For example:

let f: (x: number, y?: number) => void;

f = function (x: number, y: number = 2): void {//y is default
    console.log(`x= ${x}, y=${y}`);
}
f(3);

Output

x= 3, y=2

Example Project

Dependencies and Technologies Used:

• TypeScript 3.0.3