The TypeScript 4.0 Beta Is Here

TypeScript 4.0 beta version was released on June 25, 2020. With this beta release, we take our first set to TypeScript4.0. Although this brings a new major version, there are no substantially large breaking changes than usual. So let's see what’s new in this version.

Labeled Tuple Elements

This language feature changes the way a tuple is defined. Previously, tuples were defined as follows:

function tuple(...args: [string, number]): void {
    // ...
}

In the above example, there are no parameter names for the first and second elements. While these have no impact on type-checking, the lack of labels on tuple positions can make them harder to use — harder to communicate our intent.

As a solution to this, TypeScrip 4.0 brings tuples with labels.

type Segment = [length: number, count: number];

But if you are going to label an element, you must label all the elements in the tuple. If not you will receive an error.

type Segment = [first: string, number];
//                         ~~~~~~
// error! Tuple members must all have names or all not have names.

Class Property Inference From Constructors

If we configure TypeScript in noImplicitAny mode, TypeScript 4.0 can use control flow analysis to determine the types of properties in classes.

class Test { 
	   x; 
	   constructor(b: boolean){ 
	     if(b){ 
	       this.x = 'hello' 
	     } else { 
	       this.x = 42; 
	     } 
	   }

	
}

In previous versions of TypeScript, the above code will result in an error. But version 4.0 will compile and TypeScript will infer the type of x to be string or number.

Short-Circuiting Assignment Operators

I’m sure you must have seen compound assignment operators in many languages. Compound assignment operators apply an operator to two arguments and then assign the result to the left side. Here are some examples:

    // Addition
	// a = a + b
	a += b;
	

	// Subtraction
	// a = a - b
	a -= b;
	

	// Multiplication
	// a = a * b
	a *= b;
	

	// Division
	// a = a / b
    a /=b;

But there are three notable exceptions: logical and (&&), logical or (||), and nullish coalescing (??). TypeScript is ready to fill these gaps with the 4.0 release, and they have a promising proposal to add three new assignment operators: &&=, ||=, and ??=.

a ||= b;

// This will be equal to

a || (a = b);

Unknown on catch Clause Bindings

From the beginning of TypeScript, catch clause variables were always typed as any, which means that TypeScript allowed you to do anything you wanted with them.

try {
  throw 20;
} catch (err) {
  console.error(err.specialFunction()); 
}

In the example above, the type of error is any, and it is not type-safe due to that. That’s why TypeScript 4.0 now lets you specify the type of catch clause variables as unknown instead. unknown is safer than any because it reminds us that we need to perform some sorts of type-checks before operating on our values.

try { 
	  throw 20;
	  } catch (err: unknown) { 
	    if(err instanceof SpecialError){   console.error(err.specialFunction()); 
	    } else { 
	      … 
	  }

	
}

Custom JSX Factories

In TypeScript 4.0, users can customize the fragment factory through the new jsxFragmentFactory option. As an example, the following tsconfig.json file tells TypeScript to transform JSX in a way compatible with React but switches each invocation to h instead of React.createElement, and uses Fragment instead of React.Fragment.

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

	
}

Speed Improvements in Build Mode With --noEmitOnError

In previous versions, compiling a program after a previous compile with errors under --incremental would be extremely slow when using the --noEmitOnError flag because none of the information from the last compilation would be cached in a .tsbuildinfo file based on the --noEmitOnError flag.

In TypeScript 4.0, this has been changed and now you will get a great speed boost in these scenarios.

Editor Improvements

TypeScript compiler doesn’t only power the editing experience for TypeScript itself in most major editors — it also powers the JavaScript experience in the Visual Studio family of editors and more. You can check out a partial list of editors that have support for TypeScript to learn more about whether your favorite editor has support to use new versions.

Also, TypeScript’s editing support now recognizes when a declaration has been marked with a /** @deprecated * JSDoc comment.

Partial Editing Mode at Startup is another experimental feature that has been included in TypeScript 4.0. They say that this will be a solution for the slow loading time in many projects. This new mode for editors will provide a partial experience until the full language service experience has loaded up.

Currently, the only editor that supports this mode is Visual Studio Code Insiders. You can try it out by following these steps.

1. Installing Visual Studio Code Insiders.
2. Configure Visual Studio Code Insiders to use the beta or install the JavaScript and TypeScript Nightly Extension for Visual Studio Code Insiders.
3. Open your JSON settings view: > Preferences: Open Settings (JSON).
4. Add the following lines:

// The editor will say 'dynamic' is an unknown option, // but don't worry about it for now. It's still experimental. "typescript.tsserver.useSeparateSyntaxServer": "dynamic",

The above features are only a subset from a large set of changes that we can see in TypeScript 4.0. As this is the beta version, TypeScript invites you to test this version with your projects if you like. If that is your plan,

• You can use npm install typescript@beta.
• You can get it through NuGet.

So try it out and let them know your feedback.