TypeScript 5.1 Released, New Feature Updates

1: The return type increases undefined

type fun = () => undefined;

An alias fun is set here. When using it, we must return one explicitly undefined.

const f: fun = () => {
    
    
  return undefined;
};
f();

Now you can set the return type directly:

const f: fun = ():undefined => {
    
    
};
f();

And not limited to void any.

Version 4.3 : ❌
Version 5.1 : ✅

2: The getter can set the unrelated type of the setter

const point = {
    
    
    get value(): number {
    
    
        return 0;
    },
    set value(value: string) {
    
    
    }
};
point.value = '888'; 
console.log(point.value); 

In the previous version , the return type of get should be a subtype of set, as follows:

const point = {
    
    
    get value(): number {
    
    
        ......
    },
    set value(value: string｜number) {
    
    
    }
};

In the new version 5.1, this constraint is relaxed.

Version 4.3 : ❌
Version 5.1 : ✅

However, you should set annotations, otherwise you may express wrong interpretations to others.

3: Asynchronous support for JSX elements and JSX tags

Let's take a look at React's partial definition of JSX types:

namespace JSX {
    
    
        // 用于普通的HTML元素
        interface IntrinsicElements {
    
    
            // 为每一个HTML元素提供了对应的属性
            // ...
            // 其他HTML元素
        }

        // 用于React组件
        interface Element extends React.ReactElement<any, any> {
    
     }
        interface ElementClass extends React.Component<any> {
    
    
            render(): React.ReactNode;
        }
        interface ElementAttributesProperty {
    
     props: {
    
    }; }
        interface ElementChildrenAttribute {
    
     children?: {
    
    }; }
        // ...
}

Typescript always uses JSX.Element to determine the type of JSX, and future versions of React may provide limited support for components returning Promises.

So in order to solve this problem, typescript 5.1 adds a new attribute ElementType ✅ for users to specify the specific type of asynchronous component returned.

If you don't understand it very well, you can regard it as a kind of agreement: "In order to adapt to you, we will create a new agreement together."

"It's nice that I'm feeling alone, maybe maybe I should get a hug"

4: Support namespace attribute name JSX

When using JSX, ts supports the following writing methods:a:b

// ✅
<Foo a:b="hello" />

5: typeRoots is updated in the module

The main purpose of typeRoots is to tell the TypeScript compiler in which directories to look for type definition files (.d.ts files).

By default it looks for .d.ts files in the node_modules/@types directory.

like:

{
    
    
  "compilerOptions": {
    
    
    "typeRoots": ["node_modules/@types"],
    ...
  }
}

Version 4.3 : ❌

1. can only be resolved to a directory

Version 5.1 : ✅

1. It can be parsed as a directory or a file (if the explanation is wrong here, please let me know and correct it, thanks)

->For more details, please see here<-

6: Link cursor for JSX tags

The update function here is mainly forvscodeof. Other tools should also include this functionality.

1. Use shortcut keys Ctrl+, (ctrl plus comma)
2. Enter Linked Editing
3. Find the option "Editor: Linked Editing" and check it

7: Code segment completion for @param JSDoc tags

8: Optimization/Major Changes Section

1. Avoid unnecessary type instantiations
2. Negative case checking for union literals
3. Reduce calls to scanner for JSDoc parsing
4. ES2020 and Node.js 14.17 as minimum runtime requirements
5. Explicit typeRoots disables walking up node_modules/@types