TypeScript 4.3 Quickly: My TOP-3 Updates

#typescript #webdev #javascript

A few days ago Microsoft announced TypeScript 4.3 Beta. Here are 3 updates that I found the most interesting and a list of the rest of the updates. Let's go!

overrides + noImplicitOverrides compiler option

TypeScript now takes care of method names' safety when overriding parent class methods. When a method is marked with override, TypeScript will always make sure that a method with the same name exists in a base class. So if you make a change in the method name in the base class, you will be forced to also update it in the derived class. Neat!

But what if you forget to put override on a method? TypeScript's got a compiler option for you: with noImplicitOverrides enabled TypeScript will throw an error if you have a method with the same name in both base and derived classes:

class Base {
    show() {
        // ...
    }
}

class Derived extends Base {
    // TypeScript will throw an error
    // unless there's the "override" before the method name
    show() {
        // ...
    }
}

Different types for getter and setter

You don't have to limit getters and setters to the same type anymore.
Let's say you have a private field of type number. You want a setter for the field to accept both number and string, convert to number, and put the value into the private field. But you want a getter to always return number because the field can't be anything but number. This code would throw an error before 4.3 and now this is an acceptable way of typing getter and setter:

class IrresponsibleNumStorage {
    private _num = 42;

    // Before 4.3 TS would throw an error:
    // 'get' and 'set' accessor must have the same type.
    get num(): number {
        return this._num;
    }

    // Before 4.3 TS would throw an error:
    // 'get' and 'set' accessor must have the same type.
    set num(maybeNumber: number | string) {
        this._num = Number(maybeNumber);
    }
}

Import statement completions

This is not something that's going to be directly used in day-to-day coding, but it's going to have a huge impact on developer experience. Starting from version 4.3 TypeScript will provide a list of possible imports after just typing the import keyword. Just look at the demo by Microsoft:

Some IDE's already have similar functionality implemented from their side, but it's going to become more broad and consistent thanks to the native support by the TS language server.