Typescript 5.0 release

Introduction

As announced in the microsoft blog about the new release of typescript, there have been a number of features integrated into the language from new decorators standard, better support for ESM projects in Node and bundlers, a more simplified tsconfig.json file etc.

Getting started with typescript, through npm we can run the command.

npm install -D typescript

Some of the most interesting features added to the language that we’re gonna address in this post are:

• Decorators
• const Type Paramaeters
• Exhaustive switch/case completions
• Speed, memory and package size optimizations

Decorators

Decorators are a feature that will be included in the ECMAScript standard that allows customizing classes and their members in a reusable way. It is a function that we can apply to language constructs. That can be done by putting @ plus the decorator’s name in front of them.

Let’s say we have the following example

class Request {
  url: string
  constructor(url: string) {
    this.url = url
  }

  invoke() {
    console.log(`Method invoked at ${Date.now}`)
    // do the actuall call
    console.log(`Method finished execution at ${Date.now}`)
  }
}

This pattern is common, if we want to know when and how long does a method execute. We can extract all this functionality into a custom function that can be used in every class method we want

function loggedExecution(originalMethod: any, _context: ClassMethodDecoratorContext) {
  return function replacement(this: any, ...args: any[]) {
    console.log(`Method invoked at ${Date.now}`)
    const result = originalMethod.call(this, ...args)
    console.log(`Method finished execution at ${Date.now}`)
  }
}

loggedExecution takes the originalMethod and returns a new function that

• logs invocation time
• passes this and all arguments to original methods
• logs execution time
• returns the result of computation from the originalMethod

Now using the newly created decorator function

class Request {
  url: string
  constructor(url: string) {
    this.url = url
  }

  @loggedExecution
  invoke() {
    // do the actuall call
  }
}

The loggedexecution method has a second parameter, called context of type ClassMethodDecoratorContext, provided from typescript that models the context object the method decorators take.

Let’s say we want to print the method name, inside the loggedExecution function. We can do it by using context object properties.

function loggedExecution(originalMethod: any, _context: ClassMethodDecoratorContext) {
  const methodName = _context.name
  return function replacement(this: any, ...args: any[]) {
    console.log(`Method ${methodName} invoked at ${Date.now}`)
    const result = originalMethod.call(this, ...args)
    console.log(`Method ${methodName} finished execution at ${Date.now}`)
  }
}

Decorators can be used on more than just methods! They can be used on properties/fields, getters, setters, and auto-accessors. Even classes themselves can be decorated for things like subclassing and registration.

Summary

Microsoft has announced the release of TypeScript 5.0, a major update to its popular programming language. This new version brings a range of improvements, including stricter type checks, improved error messages, and enhanced editor support. Additionally, TypeScript 5.0 features better performance and stability, as well as new utility types and language features that streamline development. This release further solidifies TypeScript as a powerful and versatile language for modern web development.