Detailed explanation of JavaScript private class fields and TypeScript private modifiers

JavaScript private class fields and the need for privacy

In the past, JavaScript had no native mechanism for protecting variables from being accessed, except of course with classic closures.

Closures are the basis for many privacy-like patterns in JavaScript, such as the popular module pattern. However, with the use of ECMAScript 2015 classes in recent years, developers have felt the need for more control over the privacy of class members.

The class fields proposal (at stage 3 at the time of writing) attempts to solve the problem by introducing private class fields.

Let's see what they look like.

A JavaScript private class field example

Here is a JavaScript class with private fields. Note that, unlike "public" members, each private field must be declared before being accessed:

class Person {
  #age;
  #name;
  #surname;
  constructor(name, surname, age) {
    this.#name = name;
    this.#surname = surname;
    this.#age = age;
  }
  getFullName() {
    return `${this.#name} + ${this.#surname}`;
  }
}

Private class fields cannot be accessed from outside the class:

class Person {
  #age;
  #name;
  #surname;
  constructor(name, surname, age) {
    this.#name = name;
    this.#surname = surname;
    this.#age = age;
  }
  getFullName() {
    return `${this.#name} + ${this.#surname}`;
  }
}
const marta = new Person("Marta", "Cantrell", 33);
console.log(marta.#age); // SyntaxError

This is true "privacy". If you know a bit of TypeScript, you might be wondering what "native" private fields have in common with the private modifier in TypeScript.

Well, the answer is: no. But why?

The private modifier in TypeScript

Developers coming from a background in traditional programming languages ​​should be familiar with the private modifier in TypeScript. In short, the purpose of this keyword is to deny access to class members from outside the class.

But don't forget that TypeScript is a layer on top of JavaScript, and the TypeScript compiler should strip away all the fancy TypeScript comments, including private.

This means that the following class will not do what you want:

class Person {
  private age: number;
  private name: string;
  private surname: string;
  constructor(name: string, surname: string, age: number) {
    this.name = name;
    this.surname = surname;
    this.age = age;
  }
  getFullName() {
    return `${this.name} + ${this.surname}`;
  }
}
const liz = new Person("Liz", "Cantrill", 31);
// @ts-ignore
console.log(liz.age);

Without //@ts-ignore, accessing liz.age would only cause an error in TypeScript, but after compilation, you would get the following JavaScript code:

"use strict";
var Person = /** @class */ (function () {
    function Person(name, surname, age) {
        this.name = name;
        this.surname = surname;
        this.age = age;
    }
    Person.prototype.getFullName = function () {
        return this.name + " + " + this.surname;
    };
    return Person;
}());
var liz = new Person("Liz", "Cantrill", 31);
console.log(liz.age); // 31

As expected, we can output liz.age to the console. The main point here is that private in TypeScript is not so private, and only feels convenient at the TypeScript level, not "real privacy".

Now let’s move on to: “native” private class fields in TypeScript.

Private class fields in TypeScript

TypeScript 3.8 will support ECMAScript private fields, not to be confused with the TypeScript private modifier.

Here is a class with private class fields in TypeScript:

class Person {
    #age: number;
    #name: string;
    #surname: string;
    constructor(name:string, surname:string, age:number) {
        this.#name = name;
        this.#surname = surname;
        this.#age = age;
    }
    getFullName() {
        return `${this.#name} + ${this.#surname}`;
    }
}

Apart from the type annotations, it is no different from native JavaScript. Members cannot be accessed externally. But the real problem with private fields in TypeScript is that they use WeakMap under the hood.

To compile this code, we need to adjust the target compilation version in tsconfig.json, which must be at least ECMAScript 2015:

{
  "compilerOptions": {
    "target": "es2015",
    "strict": true,
    "lib": ["dom","es2015"]
  }
}

This may be problematic depending on the target browsers, and unless you plan to provide a polyfill for WeakMap, it becomes too much work just to write fancy new syntax.

There's always this tension in JavaScript where you do want to use the new syntax, but on the other hand, you don't want to degrade the user experience with lots of polyfills.

On the other hand, even if you want to release it to newer browsers, you don't have to worry about private class fields. At least that's the case now. Not even Firefox has implemented the suggestion.

The above is a detailed explanation of JavaScript private class fields and TypeScript private modifiers. For more information about JavaScript private class fields and TypeScript private modifiers, please pay attention to other related articles on 123WORDPRESS.COM!