Set default values for Class properties in TypeScript

# Set default values for Class properties in TypeScript

You can set default values for class properties directly on the class.

When you instantiate the class with the new operator, you will have access to the default value for the property and you have the ability to change it later on.

index.ts

Copied!
class Employee {
  id = 0;
  name = 'Bobby Hadz';
  country = 'Germany';
  tasks: string[] = [];

  vacation: {
    summer: boolean;
    winter: boolean;
  } = {
    summer: false,
    winter: false,
  };
}

const emp1 = new Employee();

emp1.id = 701;
emp1.name = 'Alice';
emp1.country = 'Austria';
emp1.tasks = ['web dev', 'design'];
emp1.vacation = {
  summer: true,
  winter: false,
};

// 👇️ {id: 701, name: 'Alice', country: 'Austria', ...}
console.log(emp1);

set default values for class properties

The code for this article is available on GitHub

We created an Employee class with default values for various properties.

Notice that when we assigned default values for string and number literals, we didn't have to explicitly specify the type.

TypeScript is able to infer the type of the id, name and country properties based on the default values we provided.

However, if you specify a default value that is an empty array, TypeScript infers its type to be never[].

In other words, it is typed as an array that will always be empty.

You could let TypeScript infer an object's type if you provide default values for all of its properties, but in my experience, it's best to explicitly type objects and arrays.

All of the initial values can be changed by creating an instance of the class and changing the properties on the instance.

# Specifying default values in the constructor method

An alternative approach is to provide default values in the constructor method of the class.

index.ts

Copied!
class Employee {
  constructor(
    public id = 0,
    public name = 'Bobby Hadz',
    public tasks: string[] = [],
  ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }
}

const emp1 = new Employee(undefined, undefined, ['accounting']);

emp1.id = 100;

// 👇️ {id: 100, name: 'Bobby Hadz', tasks: ['accounting']}
console.log(emp1);

specifying default values in constructor method

The code for this article is available on GitHub

We provided default values for the class's properties directly in the constructor.

You would use this approach if you need to override the defaults when instantiating the class with the new operator.

If you want to omit a specific argument and use its default value, pass undefined when instantiating the class.

Note that you must explicitly type any of the class's properties or parameters for which you don't set a default value.

index.ts

Copied!
class Employee {
  constructor(
    public id: number,
    public name = 'Bobby Hadz',
    public tasks: string[] = [],
  ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
  }
}

const emp1 = new Employee(100, undefined, ['accounting']);

explicitly type class properties for which you dont set value

The id parameter doesn't have a default value set, so we must explicitly type it as number.

When using this approach with classes that take an object as a parameter, the syntax is a bit more confusing.

index.ts

Copied!
class Employee {
  id: number;
  name: string;
  tasks: string[];
  vacation: {
    summer: boolean;
    winter: boolean;
  };

  constructor(
    { id, name, tasks, vacation } = {
      id: 0,
      name: 'Bobby Hadz',
      tasks: [],
      vacation: { summer: false, winter: false },
    },
  ) {
    this.id = id;
    this.name = name;
    this.tasks = tasks;
    this.vacation = vacation;
  }
}

const emp1 = new Employee();

// 👇️ Employee {id: 0, name: 'Bobby Hadz', tasks: []}
console.log(emp1);

emp1.id = 100;
emp1.name = 'Alice';
emp1.tasks = ['web dev', 'design'];
emp1.vacation.summer = true;

// 👇️ {id: 100, name: 'Alice', tasks: ['web dev', 'design'], ...}
console.log(emp1);

When you have an object parameter in a class constructor, things become a bit harder to read.

This is why I prefer sticking to multiple, comma-separated parameters.

We don't have to remember the parameter order when instantiating the class because any modern IDE shows us which parameter we are on, and which we need to provide next.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set default values for Class properties in TypeScript