Define optional Parameters in a Class constructor in TS

avatar

Borislav Hadzhiev

Last updated: Mar 18, 2022

banner

Photo from Unsplash

Define optional Parameters in a Class constructor in TS #

You can use a question mark to define optional parameters in a class constructor function. Alternatively, you can set a default value for the parameter, which will be used if a value is not provided when instantiating the class.

index.ts
class Employee { // 👇️ provide default values constructor(public id = 0, public name = '', public tasks: string[] = []) { this.id = id; this.name = name; this.tasks = tasks; } } const employee = new Employee(); console.log(employee.id); // 👉️ 0 class Person { // 👇️ mark as optional constructor(public address?: { country: string; city: string }) { this.address = address; } } const person = new Person(); console.log(person.address); // 👉️ undefined

The first class in the example use default values for the parameters in the constructor to mark them as optional.

Notice that we didn't even have to type the id and name parameters because their type can be inferred based on the provided default values.

However if you provide a default value for an array or object parameter, it's best to explicitly type the parameter.

If you omit the parameter when instantiating the class or explicitly pass an undefined value for it, the parameter gets assigned the default value.

index.ts
class Employee { // 👇️ provide default values constructor(public id = 0, public name = '', public tasks: string[] = []) { this.id = id; this.name = name; this.tasks = tasks; } } const employee = new Employee( undefined, undefined, ['design', 'development'], ); console.log(employee.id); // 👉️ 0 console.log(employee.tasks); // 👉️ ['design', 'development']

You can explicitly pass undefined if you want to use the default value for one of the first parameters, but specify a value for one of the latter ones.

Alternatively, you can mark a constructor parameter as optional by using a question mark.

index.ts
class Person { // 👇️ mark as optional constructor(public address?: { country: string; city: string }) { this.address = address; } } const person = new Person(); console.log(person.address); // 👉️ undefined

The address parameter is marked as optional. In other words, it can either be an object with the country and city properties or have an undefined value.

Note that required parameters in a function cannot follow optional ones.

index.ts
class Employee { // ⛔️ Error: A required parameter cannot // follow an optional parameter.ts(1016) constructor(public id?: number, public name: string) { this.id = id; this.name = name; } }

The id parameter is marked as optional, so it can't be followed by the name parameter, which is required.

However, you could have optional parameters towards the beginning of the function's definition that are followed by parameters with default values.
index.ts
class Employee { // ✅ This works constructor(public id?: number, public name = '') { this.id = id; this.name = name; } } const employee = new Employee(); console.log(employee); // 👉️ {id: undefined, name: ''}

The id parameter is optional and is followed by the name parameter, which has a default value.

If your constructor function takes an object parameter, you can use the same approach to mark some of its properties to optional.

index.ts
class Person { constructor(public address: { country: string; city?: string }) { this.address = address; } } const person = new Person({ country: 'Chile' }); console.log(person.address); // 👉️ {country: 'Chile'}

The city property is marked as optional, however the country property is required.

Here is an example of a constructor function that takes an object with an optional property and sets a default value for the entire object.

index.ts
class Person { constructor( public address: { country: string; city?: string } = { country: '' }, ) { this.address = address; } } const person = new Person(); console.log(person.address); // 👉️ {country: ''}

We provided a default value for the entire object parameter, so we didn't have to pass an object when instantiating the class.

Note that we had to specify the `country` property in the default object, because it is required.

If you don't want to provide a default value for any of the properties and want to set an empty object as the default, mark all of the properties as optional.

index.ts
class Person { constructor(public address: { country?: string; city?: string } = {}) { this.address = address; } } const person = new Person(); console.log(person.address); // 👉️ {}
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.