SoFunction
Updated on 2025-03-10

List of commonly used new features in Typescript 3.9 (recommended)

What to update? Overview

1. The definition of , and some problems in the 3.7 version of null or undefined have been fixed in 3.9.
2. The packaging speed has been greatly improved. During the self-test of the Microsoft team, the average compilation time of the typescript project was shortened from 26s to about 10s.
3. // @ts-expect-error Adding new annotation
4. Detect uncalled functions in conditional statements
5. Editor improvement

  • 5.1 Automatic introduction of CommonJS in JavaScript
  • 5.2 Keep newlines correctly when operating code
  • 5.3 Adding a quick fix to missing functions to return expressions
  • 5.4 Support "Solution Style" files

6. Some major changes

Mainly changes and fixes of previous bugs in TypeScript definition and writing specifications

Choose a few key points to write

1. Optimization and usage repair of interface

We know that after version 3.7, we have made updates to & and other methods, but it also created a problem. It is especially obvious when using null & undefined.

nterface Lion {

 roar(): void

}

interface Seal {

 singKissFromARose(): void

}

async function visitZoo(lionExhibit: Promise<Lion>, sealExhibit: Promise<Seal | undefined>) {

 let [lion, seal] = await ([lionExhibit, sealExhibit]);

 (); // uh oh

// ~~~~

// Object is possibly 'undefined'.

}

This behavior is very strange. In fact, the undefined contained in sealExhibit is equivalent to introducing the undefined error into the lion type. Here is an error reference.

Of course this issue is fixed in the latest version 3.9.

1.1 Brand new awaited type

awaited type is mainly to better define and use the current promise.

It is expected to be released on **`3.9`**, but Microsoft has delayed the vote again and can wait for the next version.

2. TypeScript packaging and compilation speed improvement

Here we mainly optimize the performance optimization of several Microsoft internal projects, such as:

  • The Typescript team found that previous components such as Material-ui and Styled-Components would result in extremely poor editing/compilation speeds. It is mainly optimized from the performance issues of union type, cross type, conditional type and various mapping type types. Reduced the compilation time of related libraries by about 40%.
  • Based on the recommendations provided by the Visual Studio Code team, we found that it took 5 to 10 seconds to find out which import statements need to be updated when performing file renaming. TypeScript 3.9 has adjusted the search method of internal compiler and language service cache files, successfully solving this problem.

For details, please see the specific optimization content of pull request below

/microsoft/TypeScript/pull/36576
/microsoft/TypeScript/pull/36590
/microsoft/TypeScript/pull/36607
/microsoft/TypeScript/pull/36622
/microsoft/TypeScript/pull/36754
/microsoft/TypeScript/pull/36696

4. Detect uncalled functions in conditional statements

In 3.7, an error message was introduced to detect uncalled functions, and some optimizations were made in 3.9.

function hasImportantPermissions(): boolean {
 // ...
}

// Oops!
if (hasImportantPermissions) {
// ~~~~~~~~~~~~~~~~~~~~~~~
// This condition will always return true since the function is always defined.
// Did you mean to call it instead?
 deleteAllTheImportantFiles();
}

However, this error only applies to conditions in the if statement. The ternary condition (i.e. syntax) now supports this feature as well. for examplecond ? trueExpr : falseExpr

declare function listFilesOfDirectory(dirPath: string): string[];
declare function isDirectory(): boolean;

function getAllFiles(startFileName: string) {
 const result: string[] = [];
 traverse(startFileName);
 return result;

 function traverse(currentPath: string) {
  return isDirectory ?
  //  ~~~~~~~~~~~
  // This condition will always return true
  // since the function is always defined.
  // Did you mean to call it instead?
   listFilesOfDirectory(currentPath).forEach(traverse) :
   (currentPath);
 }
}

5. Editor improvement

5.1 Automatic completion of CommonJS

Another major improvement to the new version is the automatic import of JavaScript files using the CommonJS module.
In older versions, TypeScript forced users to import as ECMAScript regardless of files they use, for example:

import * as fs from "fs";

However, when writing JavaScript files, many users do not intend to use the ECMScript style module. Many friends are still using CommonJS-style require(...) import, for example:

const fs = require("fs");

TypeScript now automatically detects the import type you are using, ensuring the file style is simple and unified. Now there is the following automatic introduction function

const { readFile } = require('fs')

5.2 Automatic repair function of missing function return value

In some cases, we may forget to return the value of the last statement in the function, especially when adding braces to the arrow function.

// before
let f1 = () => 42

// oops - not the same!
let f2 = () => { 42 }

6. Major improvements!

6.1 Resolving the difference between optional chains and non-null assertions

ypeScript recently implemented support for optional chain operators, but based on feedback from a wide range of consumers, optional chains (?.) behavior of non-null assertion operators (!) is not intuitive.

Specifically, in previous versions, the code:

foo?.bar!.baz

It is interpreted as equivalent to the following JavaScript code:

(foo?.bar).baz

In the above code, brackets prevent "short-circuit" behavior of the optional chain; therefore, if foo is not defined as undefined, accessing baz will throw a runtime error.

In other words, most people think that the above original code snippet should be interpreted as being in:

foo?.

In, when foo is undefined, the calculation result is undefined.

This is a major change, but we think most of the code is written to consider new interpretation scenarios. If you wish to continue using old behavior, you can do it in! Add brackets to the left of the operator, as shown below:

(foo?.bar)!.baz

refer to

/docs/

This is the end of this article about the list of commonly used new features of Typescript 3.9 (recommended). For more related new features of Typescript 3.9, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!