What’s New in TypeScript 4.0?

A typescript is an open-source language that is used to validate your Javascript program ahead of time by adding static type definitions and provide fixes before you run your code and even before you save your file.

Features of TypeScript 4

#1 Tuple type enhancements

Typescript 4.0 has made a couple of changes in how tuples are handled to make it generic even when you concatenate them using the spread operator. You also have name tuple elements for things like vectors where each position has a name. Example

type Name = [a: number, b: number]

type Name = [x: string, y: string, z: string]

A couple of variadics that rely heavily on tuples for parameters have also been improved. Now you no longer need to do overloads of multiple generic types for each number of arguments.

#2 Type Class Property Inference via constructors.

In typescript 4.0 the compiler is smart enough to figure out the types of properties based on initializations inside of a constructor function. It can also find the types of properties even if noImplicitAny is enabled. Example: class cube {
area;
Length;
constructor (Length: number)
{
This.Length = Length;
This.area = area ** 3;
}

#3 New Assignment Operators

Typescript 4.0 brings a couple of assignment operators to assign a variable to itself or something else.

These operators are:
&&= , | |=, and ??=

These are called the Short-Circuiting assignment operators. Example:
let z: string;
z ||= “False”; //right hand side is only evaluated if z is false
z &&= “True”; //right hand side is only evaluated if z is True
z ??= “Don’t Mind”; //right hand side is only evaluated if z is Null

#4 “unknown” on “catch” Clause Binding

In the earlier version of typescript, the variable which was assigned to the catch statement was “any” type. Now the typescript has introduced the “unknown” type which is a lot safer than “any” because we need to do some types checking before performing operations on our values.

#5 Custom JSX Fragment Factory

A fragment helps us in returning multiple child elements. These were the document portions that don’t have any parent but multiple child elements in the structure. We can now customize the fragment factory using the jsxFragmentFactory tool as typescript now allows you to specify to call it whatever function you want.

#6 “--incremental” Build Improvements

The typescript 4.0 has introduced the “–incremental” flag which allows you to skip recompiling the parts of your code which has already been compiled before. It is used with “--noEmitOnError” and “--noEmit” in the “--build” mode which has now speeded up the compilation.

#7 Editor Support Improvements

They have added the “@deprecated” support in which the deprecated values will be displayed by crossing out the method name every time you call it in strike-through style. Example: obj.helloworld( );

They have also introduced the partial editing mode which is a mode that provides a partial experience until the complete language experience is loaded. People have been complaining about the huge loading time for large projects. By this feature, the editor runs a lightweight version of the current files that the editor has opened and load the full experience in a later time which has speeded the whole process altogether.

We also get the Auto-Import feature which makes the coding part much easier. It does some checking to figure out what projects should it Auto-Import from. You can Enable/Disable searching “package.json” dependencies for available auto-imports. The four options that are available to you are “auto”, “on”, “off”, and “Never search dependencies”.

#8 Breaking Changes

These changes are made for the sake of improving the language. A couple of declarations inside the lib.d.ts have been removed. These were mostly for the compatibility with the older versions of typescript but now they are not needed. Also, the compiler now won’t allow you to override properties if you choose to override a “getter” or “setter” in a base class. Finally, the use of delete operator will show an error if it is not used with the operand “any”, “never”, “unknown”, or be optional [“undefined”].

Right now Typescript 4.0 is available in a beta format. If you want to use the latest version of typescript 4.0, you can install by typing the syntax “npm install typescript@beta”, if you want to install locally on a project or you can type “npm install –g typescript@beta” if you want to install it globally on a machine. Soon it will be out of the beta in a week or a month, then you will be typing only “npm install typescript” to get the latest version of 4.0.

If you need more information on Typescript, you can get it from their newly developed website https://www.typescriptlang.org.

Visit our website regularly for more of these useful updates. Thanks!