kunal-chowdhury.com

TypeScript 4.2 adds some new features and enhancements



TypeScript is an open-source programming language, which extends JavaScript to bring static types to modern JavaScript. TypeScript language is designed, developed, and maintained by Microsoft to provide developers the ability to develop JavaScript applications for both client-side and server-side (Node.js) execution.

 

Microsoft announces TypeScript 4.2, which adds some new features and enhancements. Here's everything that you would like to know about the new features which are part of this release.

 

TypeScript 4.2 adds some new features and enhancements

 

TypeScript allows you to create type aliases to declare new names for types. If you are writing a set of functions that works on string | number | boolean, you can write a type alias to avoid repeating the same again and again. With the new release, the TypeScript internals became a little smarter. Microsoft said that it now keeps track of how types are written and constructed over time.

 

export type BasicPrimitive = number | string | boolean;

export function doStuff(value: BasicPrimitive) {
    if (Math.random() < 0.5) {
        return undefined;
    }

    return value;
}

 

TypeScript tuples are sophisticated by allowing you to model things like parameter lists in JavaScript. Hence, they can have optional elements and rest elements. With TypeScript 4.2, Microsoft expands the rest elements in how they can be used. In earlier versions of TypeScript, it only allowed ...rest elements at the end of a tuple type. Now, you can place the rest elements anywhere in a tuple as long as it is not followed by any other optional element or a rest element.

 

let foo: [...string[], number];

foo = [123];
foo = ["hello", 123];
foo = ["hello!", "hello!", "hello!", 123];

let bar: [boolean, ...string[], boolean];

bar = [true, false];
bar = [true, "some text", false];
bar = [true, "some", "separated", "text", false];

 

 

If you use a non-object type on the right side of the in operator, JavaScript throws a runtime error. When you use TypeScript 4.2, this can be caught at design time.

 

"foo" in 42
//       ~~
// error! The right-hand side of an 'in' expression must not be a primitive.

 

TypeScript 4.2 introduces a new flag called --noPropertyAccessFromIndexSignature. Under this model, users will opt into TypeScript's older behavior that issues an error. As this setting will be more useful on certain codebases than others, it is not part of the strict family of flags.

 

TypeScript 4.2 also allows you to specify a abstract modifier on constructor signatures. When you add the abstract modifier to a constructor signature, it signals that you can pass in abstract constructors, but it doesn't stop you from passing in any concrete classes/constructor functions. It just signals that there is no intent to run the constructor directly, so it is safe to pass in either class type. With this feature, you can now write mixin factories in a way that supports abstract classes.

 

abstract class SuperClass {
    abstract someMethod(): void;
    badda() {}
}

type AbstractConstructor<T> = abstract new (...args: any[]) => T

function withStyles<T extends AbstractConstructor<object>>(Ctor: T) {
    abstract class StyledClass extends Ctor {
        getStyles() {
            // ...
        }
    }
    return StyledClass;
}

class SubClass extends withStyles(SuperClass) {
    someMethod() {
        this.someMethod()
    }
}

 

 

Apart from these, TypeScript 4.2 now provides a --explainFiles flag. When using this option, the TypeScript compiler will give some very verbose output about why a file ended up in your program. TypeScript’s uncalled function checks now apply within && and || expressions.

 

Visit the official announcement here to learn more about the features introduced in TypeScript 4.2.