- Published on
Typescript 5.0 release
- Authors
- Name
- Fortan Pireva
- @fortanpireva
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.