Do you already know about auto-accessors in TypeScript?

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

Around since TypeScript 4.9, it’s also a feature described in the original decorators proposal.¹

Essentially, this syntax works like this: when we have an accessor, we usually have a get method that returns an internal variable of a class, 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
}

Notice how we have not one, but 7 lines just to create an accessor that sets and gets the internal variable #__nome? It would be much better if we could do all of that at once, and that’s exactly why auto-accessors exist. Everything I wrote above can become this:

1
class Person {
2
    accessor nome: string;
3

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

Under the hood, what auto-accessors do is exactly what we did in the first snippet, they expand nome into a private internal class variable, and an external variable accessible only through a getter and a setter.

In general, this feature isn’t something very related to logic, but rather to quality of life, especially when we’re creating decorators that need several getters and setters.