Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

TypeScript 4.0 was released, what's new?


Jun 01, 2021 Article blog



Overall, there has been no particularly significant change in compatibility in this release. Because the TypeScript team indicates that the new version continues to use a version control model similar to previous versions, 4.0 can be considered a continuation upgrade version of 3.9.

And they've been pursuing an upgrade path that breaking changes without sacrificing major flexibility.

If you're not familiar with TypeScript here's a quick introduction: It's a language built on top of JavaScript by adding static type syntax. T he basic idea is that after you write down the types of values and where they are used, you can use TypeScript to type-check your code and tell you about code errors before you run it, even before you save the file. Y ou can then use the TypeScript compiler to detach types from your code and provide you with simple, easy-to-read JavaScript code that runs anywhere. I n addition to type checking, TypeScript uses static types to support powerful editor tools such as autocomplete, code navigation, refactoring, and more. In fact, if you've used JavaScript in an editor like Visual Studio Code or Visual Visual Studio you've already used the type and TypeScript experience.

TypeScript is a core part of the JavaScript technology stack used by many people today. O n npm, TypeScript achieved more than 50 million monthly downloads for the first time in July! W hile we know it always has room for growth and improvement, it's clear that most developers who use TypeScript coding really like it. StackOverflow latest developer survey ranks TypeScript as the second most popular language. In the latest JS Status Survey, approximately 89% of developers who use TypeScript indicate that they will use it again.

The main updates for version 4.0 are as follows:

  • Variable parameter tuple type
  • The tuple element of the tag
  • The class property inference of the constructor
  • Short-circuit allocation operator
  • unknown in the catch clause
  • Customize the JSX factory
  • Speed increase with --noEmitOnError parameter build mode
  • --incremental with --noEmit
  • Editor improvements
    • Convert to an optional link
    • Support /** @deprecated */
    • Partial edit mode at startup
    • Smarter automatic import
  • Breaking Changes

The class property inference of the constructor

When noImplicitAny is enabled, TypeScript 4.0 can now use control flow analysis to determine the type of property in the class.

class Square {
    // Previously: implicit any!
    // Now: inferred to `number`!
    area;
    sideLength;


    constructor(sideLength: number) {
        this.sideLength = sideLength;
        this.area = sideLength ** 2;
    }
}

If not all paths of the constructor are assigned to instance members, the property may be undefined

class Square {
    sideLength;


    constructor(sideLength: number) {
        if (Math.random()) {
            this.sideLength = sideLength;
        }
    }


    get area() {
        return this.sideLength ** 2;
        //     ~~~~~~~~~~~~~~~
        // error! Object is possibly 'undefined'.
    }
}

In a more explicit case, such as having some kind of initialize method, if you are in strictPropertyInitialization you may need explicit type comments and fixed-value assignment assertions ( ! )

class Square {
    // definite assignment assertion
    //        v
    sideLength!: number;
    //         ^^^^^^^^
    // type annotation


    constructor(sideLength: number) {
        this.initialize(sideLength)
    }


    initialize(sideLength: number) {
        this.sideLength = sideLength;
    }


    get area() {
        return this.sideLength ** 2;
    }
}

Short-circuit allocation operator

JavaScript and many other languages support composite assignment operators. T he compound assignment operator applies an operator to two parameters, and then assigns the result to the left. as follows:

/ Addition
// a = a + b
a += b;


// Subtraction
// a = a - b
a -= b;


// Multiplication
// a = a * b
a *= b;


// Division
// a = a / b
a /= b;


// Exponentiation
// a = a ** b
a **= b;


// Left Bit Shift
// a = a << b
a <<= b;

Many operators in JavaScript have a corresponding assignment operator, with three exceptions: logic and ( && ), logic or ( || ), and empty value merge ??

TypeScript 4.0 adds the corresponding assignment operator support for the three operators above:

let values: string[];


// Before
(values ?? (values = [])).push("hello");


// After
(values ??= []).push("hello");
a ||= b;


// actually equivalent to


a || (a = b);

What's new about the TypeScript 4.0 release from W3Cschool编程狮 Related to the introduction, I hope to help you.