Latest Features of Typescript 3.8 2020 release

It is Feb 2020, and a few days back TypeScript released it's 3.8 version which you can download now, till now it was on beta. I was reading their release Notes and thought on sharing with you guys descriptively with different use cases.

I'll explain the top 5 TypeScript 3.8 features mentioned in the Feb 2020 release notes one by one with examples. So let's begin

1. Type-Only Imports and Exports

A new import-export syntax introduced where users can import and export only types.

import type { SomeType } from "somefile";

export type {SomeType}

import type import only types and declaration similarly export type only export types and declaration. Now it seems a little of no use, as we can simply import types using ECMAScript import statement when a type-specific import statement? So the answer is, when you write an import statement, it loaded that module, but when importing only types or declaration, we don't want the module to be loaded as those types are only required before compilation and absolutely useless at runtime.

So type-only imports and exports are added, keeping in mind the above scenario, so they always get fully erased at run time and won't load unnecessary modules. But in case you don't want this behavior, then you can change it using importsNotUsedAsValues compiler option.

You have to be careful when importing some class as a type because in that case, it won't be used as the value. See the example below

import type { Component } from "react";

interface FooComponentProps {
    // ...
}

class FooComponent extends Component<FooComponentProps> {
//                         ~~~~~~~~~
    // error! 'Component' only refers to a type, but is being used as a value here.

    // ...
}

Here Component is being imported as a type but being used as a value, that causes an error. So you have to use the ECMAScript import statement.

2. ECMAScript Private Fields

If you're aware of class private fields in ECMAScript 2019, so they were not yet supported in the TS version < 3.7. But in this release, private fields are also supported. You can read the difference between keyword and private fields. A simple example of it below.

class MyClass {
    #privateData: string;

    constructor(someValue: string) {
        this.#privateData = someValue;
    }
}

const MyClassObj = new MyClass('TypeScript');

MyClassObj.#privateData;
//         ~~~~~~~~~~~~
// Property '#privateData' is not accessible outside class 'MyClass' because it has a private identifier.(18013)

3. export * as something Syntax

Whenever we have to import all the exported members of a module, we use the following syntax

import * as React from "react";

but this wasn't possible on the export side, till TS 3.7. So a workaround of it was.

import * as React from "react";

export { React };

But now typescript supports it as ECMA added this specification in ECMAScript 2020. See Example below.

export * as React from "react";

4. Top-Level await

If you're aware of async-await, then you know that to use the await keyword, we use the async keyword.

async function showNames() {
    const names = await fetchNames().catch(error => { throw error });
    console.log({names});
}

So it wasn't possible to use await in the top-level (outside any function), it is also now supported by TS 3.8 and in upcoming ECMAScript. But it can only be used inside a module, so if your file is not a module you can write export { } to make it a module and pass the isolatedModules compile check. An example is below:

const names = await fetchNames();
console.log({names})

You also have to set the target compiler option is es2017 or above, and the module is esnext or system. 

5. JSDocs Property Modifiers

This release allows you to use JavaScript files (allowJs flag) with type-checks. For that, it is using JSDocs, tags which allow some flags and tags in the comment just above the code line. For example, below is a JS file code.

// @ts-check

class Foo {
    constructor() {
        /** @private */
        this.stuff = 100;
    }

    printStuff() {
        console.log(this.stuff);
    }
}

new Foo().stuff;
//        ~~~~~
// error! Property 'stuff' is private and only accessible within class 'Foo'.

So, here even this is a JS file, we can allow TS to compile it based on the JSDocs tags.

For now, only a few JSDocs tags are supported which are @public, @private, @protected and @readonly. This is very useful when you start to code in some old JS projects and miss the TS environment.

Thanks for reading this article, if you find any missing information or misinformation, please let know to correct it at [email protected]