Auto-accessors in TypeScript

TypeScript has a bunch of really interesting features that few people know about, one of them is auto-accessors in classes.

Available since TypeScript 4.9, it’s also a feature described in the original decorators proposal.We’ve actually talked about decorators here.

So here’s how it works. When you have an accessor, you typically have a get method that retrieves an internal class variable. For example:

1
class Pessoa {
2
    #__nome: string;
3

4
    get name() {
5
        return this.#__nome;
6
    }
7
    set name(val: string) {
8
        this.#__nome = val;
9
    }
10

11
    constructor(nome: string) {
12
        this.nome = nome;
13
    }
14
}

See how that’s not one or two lines, but seven just to create an accessor that sets and gets the internal #__nome variable? It would be so much better if you could do all that at once, and that’s exactly what auto-accessors are for. All that code I just wrote can become this:

1
class Person {
2
    accessor nome: string;
3

4
    constructor(nome: string) {
5
        this.nome = nome;
6
    }
7
}

Under the hood, auto-accessors do exactly what we did in that first example. They expand nome into an internal private variable and an external variable you can only access through a getter and a setter.

All in all, this feature isn’t about logic, it’s about quality of life. Especially when you’re creating decorators that need a bunch of getters and setters.