DEV Community

loading...
Cover image for TypeScript 4.3 Quickly: My TOP-3 Updates

TypeScript 4.3 Quickly: My TOP-3 Updates

alexkhismatulin profile image Alex Khismatulin ・3 min read

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() {
        // ...
    }
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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:
Import statement completions
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.

What else?

Thank you for reading!

P.S. I'm new to Twitter and will be happy if you drop me a line there!

Discussion (6)

pic
Editor guide
Collapse
danielkrupnyy profile image
Daniel Krupnyy

Great job! Thank you!

Collapse
alexkhismatulin profile image
Alex Khismatulin Author

Thanks! Glad you liked it!

Collapse
andrewbaisden profile image
Andrew Baisden

Nice article.

Collapse
alexkhismatulin profile image
Collapse
klausdevwalker profile image
Klaus Ferreira

Great article! :)

Collapse
alexkhismatulin profile image