TypeScript 5.0 programming language reorganizes Decorators

TypeScript 5.0 programming language reorganizes Decorators

Microsoft released TypeScript 5.0 on schedule almost two months after the first beta. The stable release brings a fresh concept for decorators that builds on plans for ECMAScript. In addition, parameters can be declared as constants to improve type inference.

TypeScript 5.0 is not a fresh major version: the team uses decimal counting for the programming language and increases the decimal place by one for each feature release. Consequently, TypeScript 5.0 follows version 4.9, just like 2020 TypeScript 4.0 follows version 3.9.

Fresh decorators

TypeScript previously knew decorators as an experimental implementation that required the compiler flag –experimentalDecorators. Decorators are functions that are called on classes or their functions and properties. You can replace, initialize, or provide advanced access to elements. The current release turns the integration inside out and relies on the current status of the associated ECMAScript proposal, i.e. the standard for decorators planned for JavaScript.

Logging use case

A typical example, which can also be found in the ECMAScript proposal, is replacing a method with a general method that outputs a message to the console each time it is called in order to track down errors. An example of this can be found on the TypeScript blog. The following code shows the simple variant without TypeChecking:

function loggedMethod(originalMethod: any, _context: any) {

function replacementMethod(this: any, …args: any[]) {
console.log(“LOG: Entering method.”)
const result = originalMethod.call(this, …args);
console.log(“LOG: Exiting method.”)
return result;
}

return replacementMethod;
}

A method decorated with @loggedMethod uses this function as a replacement. It first gives “LOG: Entering method.” then executes the original method (originalMethod.call) to finish with “LOG: Exiting method.” to write to the console.

At least temporarily, TypeScript will allow both the new and the old implementation. The latter takes effect if the compiler flag –experimentalDecorators is set. Otherwise, the new decorators apply, which, unlike the old implementation, do not allow parameter decorators and cannot output the metadata via –emitDecoratorMetadata.

Compared to the beta, the team has added a little something to the decorators: A decorator can either appear before or after export, as in the ECMAScript proposal. Both positions are allowed, but must not appear mixed:

// before export is allowed: @register export default class Foo { // … } // after export is allowed: export default @register class Bar { // … } // before AND after export is not allowed: @before export @after class Bar { // … }

More accurate type inference thanks to constant parameter declaration

Another addition in TypeScript 5.0 is intended to improve type inference: parameters can be declared as constants. So the keyword const in

type HasNames = { names: readonly string[] };
function getNamesExactly(arg: T):
T[“names”] { … }

for TypeScript to specify the type exactly and not as a string[] recognizes. Constant only refers to the type, not the value. To declare it immutable, readonly is required.

Configuration files, enums and JSDoc

In addition, there are a few other notable innovations in the current release: from TypeScript 5.0, configuration files for projects can fall back on more than one basis under extends, and enumerations are now always union enums instead of numeric constants as before, in case of doubt.

In interaction with JSDoc, TypeScript 5.0 knows two new marks: @overload for overloaded functions and @satisfies for the operator satisfies introduced in TypeScript 4.9.

More new features in TypeScript 5.0 can be found on the TypeScript blog. The programming language can be installed with npm install typescript or downloaded via NuGet.

(rme)

To home page