What's New in the TypeScript 4.3 Beta

The new TypeScript version came out in beta on April 1st, 2021! For now this version still isn’t ready for production, but it already includes some really cool changes and fixes!

To test all of this you can install the newest version with npm i typescript@beta and start enjoying the new features!

Separate read and write types#

Originally, when we have a class property that needs to be written and read in different ways, we write a getter and a setter for that property, for example:

1
class Foo {
2
    #prop = 0
3

4
    get prop() {
5
        return this.#prop
6
    }
7

8
  set prop (value) {
9
        let val = Number(value)
10
        if (!Number.isFinite(num)) return
11
        this.#prop = val
12
    }
13
}

In TypeScript, by default, the type is inferred from the return type of get. The problem is that if we have a set property that can be set in multiple ways, for example as a string or a number, the return type of this property will be inferred as unknown or any.

The problem with that is that when we’re using unknown we’re forced to cast to the type we want, and any really doesn’t do anything. This model forced us to choose between being precise or being permissive. In TS 4.3 we can specify separate types for the input and output of properties:

1
class Foo {
2
    private prop = 0
3

4
    get prop(): number {
5
        return this.prop
6
    }
7

8
  set prop (value: string | number) {
9
        let val = Number(value)
10
        if (!Number.isFinite(num)) return
11
        this.prop = val
12
    }
13
}

And this isn’t limited to classes, we can do the same thing with object literals:

1
function buildFoo (): Foo {
2
  let prop = 0
3
  return {
4
    get prop(): number { return prop }
5
    set prop(value: string | number) {
6
      let val = Number(value)
7
      if (!Number.isfinite(val) return
8
      prop = val
9
    }
10
  }
11
}

And this also applies to interfaces:

1
interface Foo {
2
  get prop (): number
3
  set prop (value: string | number)
4
}

The only limitation here is that the set method’s type list needs to include the same type as the get, meaning that if we have a getter that returns a number the setter needs to accept a number.

The override keyword#

A less common but equally important change comes when we have derived classes. Usually, when we use a derived class with extends, we have several methods from the parent class that need to be overridden, or adapted. To do that we write a method on the derived class with the same signature:

1
class Pai {
2
  metodo (value: boolean) { }
3
  outroMetodo (value: number) {}
4
}
5

6
classe Filha extends Pai {
7
  metodo () { }
8
  outroMetodo () { }
9
}

What happens here is that we’re overriding both methods from the parent class and only using the ones from the derived class. But if we modify the parent class and remove both methods in favor of a single one, like this:

1
class Pai {
2
  metodoUnico (value: boolean) { }
3
}
4

5
classe Filha extends Pai {
6
  metodo () { }
7
  outroMetodo () { }
8
}

What happens is that our child class no longer overrides the parent class’s method, so it ends up with two completely useless methods that will never be called.

Because of this, TypeScript 4.3 added a new keyword called override. What this keyword does is tell the compiler that a method in the child class is explicitly overriding one from the parent, so we can write it like this:

1
class Pai {
2
  metodo () { }
3
  outroMetodo () { }
4
}
5

6
classe Filha extends Pai {
7
  override metodo () { }
8
  override outroMetodo () { }
9
}

In this example we’re telling TypeScript to explicitly check the parent class for two methods with these names. And if we then modify our parent class while keeping the child class as is:

1
class Pai {
2
  metodoUnico (value: boolean) { }
3
}
4
classe Filha extends Pai {
5
  override metodo () { }
6
  override outroMetodo () { }
7
}
8

9
// Error! This method can't be marked with 'override' because it's not declared in 'Pai'.

On top of that, a new --noImplicitOverride flag was added to keep us from forgetting to mark these methods. Once it’s on, we won’t be able to override a method without writing override before it, and any method that isn’t marked won’t be treated as an override.

Auto imports#

The last important update we’ll cover is more of a significant quality-of-life improvement for everyone who writes imports (which is, basically, everyone). Before, when we typed import { TypeScript had no way of knowing what we were about to import, so we’d often write import {} from 'module.ts' and then go back into the {} to get autocomplete on whatever was left.

In version 4.3, we get the same auto-import intelligence that already exists in the editor to help complete our declarations, as the video shows:

The important part here is that we need the editor to support this feature. For now it’s available in regular VSCode version 1.56, but only with the TS/JS nightly extension installed.

Other updates#

Besides the updates we’ve covered, TypeScript also changed and significantly improved how template literal types are inferred and identified. Now we can use them in a much simpler and more direct way.

We also get better Promise assertions and a breaking change in .d.ts files, which you can read about in the official release post.