Auto implemented properties in TypeScript

Amit Merchant · February 22, 2022 ·

When working with classes in TypeScript, if the class has some properties and if you want to initialize these properties, you would do it in the constructor.

The traditional way

For instance, let’s say, we have a User class and there are some properties that we want to initialize, here’s how we can do it.

class User {
    id: number;
    name: string;
    sex: string;

    constructor(id: number, name: string, sex: string) {
        this.id = id;
        this.name = name;
        this.sex = sex;
    }
}

const user = new User(1, 'Cherika', 'F');

console.log(user.name); // Cherika

As you can tell, to initialize a class property, you can use the constructor as a single source of truth.

Now, this works perfectly fine but if you can see, there’s a lot of duplication going on here.

First, we declared the properties in the class and then all these properties get initialized through constructor parameters under its body using this.

But guess what? There’s a more concise way of doing so.

Auto implemented properties

Auto implemented properties or parameter properties is a way of turning constructor properties into class properties with the same name and value.

So, if want to write the previous example with this syntax, here’s how we can do it.

class User {
    constructor(
        public id: number, 
        public name: string, 
        public sex: string
    ) {}
}

const user = new User(1, 'Cherika', 'F');

console.log(user.name); // Cherika

As you can tell, for this to work, it’s important to prefix constructor arguments with one of the visibility modifiers public, private, protected, or readonly explicitly.

So, if you want to keep a property as public, you need to specify public explicitly. Same for other visibility modifiers as well.

💡 Trivia: PHP has also got a similar feature in PHP 8 called constructor property promotion recently which works exactly like auto implemented properties.

In closing

Auto implemented properties help reduce the amount of code dramatically since the declaration and assignment of the property will happen in the constructor parameters itself.

So, unless you’re not doing any sort of calculation before doing the assignment, using the parameter properties is a way to go, in my opinion.

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?