TypeScript 4.0 — Breaking Changes

TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

In this article, we’ll look at the best features of TypeScript 4.

Custom JSX Factories

TypeScript 4.0 lets us customize the fragment factory with the jsxFragmentFactory option.

We can set the settings in tsconfig.json by writing:

{
  compilerOptions: {
    target: "esnext",
    module: "commonjs",
    jsx: "react",
    jsxFactory: "h",
    jsxFragmentFactory: "Fragment",
  },
}

Also, we can set the factories in a per-file basis:

/** @jsx h */
/** @jsxFrag Fragment */

jsxFactory is the function to render JSX into JavaScript.

And jsxFragmentFactory lets us render JSX fragments to JavaScript.

Speed Improvements in build mode with --noEmitOnError

The noEmitError option lets us compile incrementally by caching data in a .tsbuildinfo file.

This will give us a performance when building with the --incremental flag.

--incremental with --noEmit

The --noEmit flag can now be used with the --incremental flag to speed up incremental builds.

Editor Improvements

With TypeScript 4.0, Visual Studio Code and Visual Studio becomes smarter.

One thing it can do is shrink long chains of undefined checks into the optional chaining or nullish coaslescing expressions.

For example, if can shrink:

a && a.b && a.b.c

into:

a?.b?.c

It also adds support for the /** @deprecated */ flag to mark code as being deprecated.

Then the code will appeared as being crossed out.

Partial Semantic Mode at Startup

Partial semantic mode speeds up the startup time of Visual Studio Code and Visual Studio by partially parsing the code instead of parsing everything during startup.

Now the startup delay should only be a few seconds because of that.

This means that we’ll get the rich experience of the editors immediately.

Smarter Auto-Imports

Auto-imports is now smarter since it works with packages that ships with its own types.

TypeScript 4.0 can search for the packages listed in package.json for types so that it can find the types and let us do auto-import on those packages.

We set the typescript.preferences.includePackageJsonAutoImports to true to let us do the auto-imports.

Properties Overriding Accessors (and vice versa) is an Error

Properties that override accessors and vice versa is an error with TypeScript 4.0.

For example, if we have:

class Base {
  get foo() {
    return 100;
  }
  set foo(value) {
    // ...
  }
}

class Derived extends Base {
  foo = 10;
}

then we’ll get an error since we set this.foo to a new value.

Operands for delete must be optional

Operands for delete must be optional since they can be removed.

So if we have something like:

interface Thing {
  prop: string;
}

function f(x: Thing) {
  delete x.prop;
}

then we get an error because props is required with Thing .

Conclusion

There are some breaking changes that comes with TypeScript 4.0.

Also, it has more features for setting JSX factories and converting syntax automatically.