Dieser Blogartikel ist älter als 5 Jahre – die genannten Inhalte sind eventuell überholt.
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.
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.
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.
Per-file JSX factories and JSX namespaces
It is now possible to have multiple JSX namespaces (
jsxNamespace) and JSX factories (
React.createElement is used as default.
symbol named properties with
keyof and mapped types
Previously, the operator
keyof only supported
string named properties. This extends now to
keyof T for some type
T is now a subtype of
string | number | symbol.
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
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.
Type inference in conditional types
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
Tthose types that are assignable to
Extract<T, U>— Extract from
Tthose types that are assignable to
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
readonly and the optional
? can be added or removed from mapped types.
There is also the new type
Required that is defined as:
You can now use types directly without importing them first.
JSON Module resolution
.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).