What’s new in TypeScript 2.8/2.9? [State of the Web]

TypeScript 2.8 and 2.9 have been released with lots of new features. In this is summary I will be focusing on what I personally find handy and group it by usage. For all changes, please refer to the official release notes at the bottom of this section.

What’s new in TypeScript 2.8 and 2.9

This article is part of our State of the Web format we publish on a regular basis. Check out our other articles about the newest tech related stuff on the web.

Visual Studio Code IDE features

VS Live Share

It is now possible to collaborate (pair programming) directly from within Visual Studio Code (VS Live Share Extension required). To host a session, simply log in via Microsoft or Github and initiate the Session. Then your colleague can join with the generated invite link.

You can both work on the same codebase without your colleague having to check out any repo. Both see each other’s cursors and can edit files synchronized. Even debugging together or sharing a Terminal is possible.

Check out the full article here.

Unused variables and imports

VS Code lets you spot unused variables and imports more easily by marking them gray. IntelliSense will also suggest to remove such variables or imports and even remove all unused statements.

Refactoring

When moving files, VS Code will prompt to automatically update the corresponding imports. To refactor classes and functions into a new file, mark the class or file name and VS Code will suggest to move them to a new file. This does not work for arrow functions though.

Furthermore VS Code can now generate Getter and Setter functions for you.

Outline view

Right-click into your explorer view and enable Outline view. While still in preview stage, it’s already quite handy for large files.

JSX features for React fans

Generic type arguments in JSX elements

You can now pass type arguments to your generic components in JSX.

Example:

Per-file JSX factories and JSX namespaces

It is now possible to have multiple JSX namespaces (jsxNamespace) and JSX factories (@jsx pragma). React.createElement is used as default.

Example:

Generates:

TypeScript changes

number and symbol named properties with keyof and mapped types

Previously, the operator keyof only supported string named properties. This extends now to number and symbol.

keyof T for some type T is now a subtype of string | number | symbol.

Conditional Types

With conditional types you can declare a Type based on a condition expressed as a type relation test:

This means when T is assignable to U, then the type is X, otherwise Y.

Distributive conditional types

Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation.

Example:

Type inference in conditional types

Within the extends clause of a conditional type, it is now possible to have infer declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type.

New Predefined conditional types

• Exclude<T, U> — Exclude from T those types that are assignable to U.
• Extract<T, U> — Extract from T those types that are assignable to U.
• NonNullable — Exclude null and undefined from T.
• ReturnType — Obtain the return type of a function type.
• InstanceType — Obtain the instance type of a constructor function type.

Improved control over mapped type modifiers and Required Type

With the + and - operator, readonly and the optional ? can be added or removed from mapped types.

Example:

There is also the new type Required that is defined as:

import types

You can now use types directly without importing them first.

Example:

JSON Module resolution

Working with .json files was made easier with --resolveJsonModule. With that flag, TypeScript resolves .json files and automatically infers the types.

--pretty by default

All errors are shown in pretty by default (if the output device can display colors).

References

– VS Code May 2018 Updates

– What’s new in TypeScript 2.8

– What’s new in TypeScript 2.9