New in TypeScript 3.8: Type‑Only Imports, Private Fields, Top‑Level Await

TypeScript recently released version 3.8, adding several new features; this article focuses on a few of the main ones.

Type-Only Imports and Export

TypeScript reuses JavaScript's import syntax, and thanks to the import elision feature we can import everything without worrying about what is actually used. However, this can cause problems when the compiler cannot distinguish whether an imported symbol is a type or a value.

Problem 1:

import { MyThing } from "./some-module.js";
export { MyThing };

If MyThing is a type, the transpiled code will be invalid and isolatedModules will warn.

Problem 2 (AngularJS 1.x):

// ./service.ts
export class Service {
    // ...
}
register("globalServiceId", Service);

// ./consumer.ts
import { Service } from "./service.js";
inject("globalServiceId", function (service: Service) {
    // do stuff with Service
});

Because the imported Service is only used as a type, the import is elided and the service code is not executed, causing runtime errors.

TypeScript 3.8 adds import type and export type to solve these issues:

import type { SomeThing } from "./some-module.js";
export type { SomeThing };

import type

is removed entirely during transpilation, and export type only exports a type, also removed from the emitted JavaScript.

PR: https://github.com/microsoft/TypeScript/pull/35200

ECMAScript Private Fields

TypeScript 3.8 supports the stage‑3 ECMAScript private fields syntax.

class Person {
    #name: string;
    constructor(name: string) {
        this.#name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.#name}!`);
    }
}
let jeremy = new Person("Jeremy Bearimy");
// jeremy.#name // ❌ Property '#name' is not accessible outside class 'Person'

Rules for private fields:

Private fields start with the # character.

Each private field name is unique within its containing class.

Traditional public and private modifiers cannot be used on private fields.

Private fields cannot be accessed outside the class that defines them.

PR: https://github.com/Microsoft/TypeScript/pull/30829

Top-Level await

Previously, await could only be used inside async functions, requiring an extra wrapper for top‑level code. TypeScript 3.8 adds native top‑level await, eliminating that boilerplate.

const response = await fetch("...");
const greeting = await response.text();
console.log(greeting);
// Make sure we're a module
export {};

Top‑level await works only in modules, i.e., files that contain an import or export. If a file has no dependencies, adding an empty export {} makes it a module.

PR: https://github.com/microsoft/TypeScript/pull/35813

JSDoc Property Modifiers

By enabling the allJs option, TypeScript 3.8 can type‑check JavaScript files. When // @ts-check or checkJs is used, JSDoc annotations are respected, including new property modifiers such as @public, @private, and @protected.

// @ts-check
class Foo {
    constructor() {
        /** @private */
        this.stuff = 100;
    }
    printStuff() {
        console.log(this.stuff);
    }
}
new Foo().stuff; // ❌ Property 'stuff' is private and only accessible within class 'Foo'.

export * as ns Syntax

Previously, re‑exporting a namespace required two statements:

import * as utilities from "./utilities.js";
export { utilities };

TypeScript 3.8 supports the concise syntax:

export * as utilities from "./utilities.js";

Other

For a complete list of new features in TypeScript 3.8, see the official announcement.

Article: https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/