Understanding typescript latest features - examples

Latest Typescript update

Typescript 4.5.4 arrived and was released in December 2021.

Microsoft release this new version. Typescript is an extended version of javascript based on the ECMA standard for type safety. There is a major structural change released with this.

In this article, We will see the major features and with examples

Features

• Project references
• Richer Tuple types
• Unknown Type
• Support for DefaultProps in JSX
• Improved error messaging
• API breaking changes

Project Reference changes

It is a major feature that will be helpful for larger projects.

Modularize your bigger project into a smaller project so that compile and built time are reduced and code can be reused across multiple projects.

A project is dependent on other projects.

Each project has a typescript configuration file tsconfig.json. a project tsconfig.json file can be used by another tsconfig.json file.

A big project can be divided into smaller projects to have linearized the build and built time is improved and transparent across multiple projects

Advantages

• Improves Build times
• Logical separation of code based on features
• Clean separation and code manageable

Tuple Types

A tuple is not a named type but is a fixed combination of different types.

let tupleValue: [number,string ];  
tupleValue = [ 30,"testvalue"]; // OK  

Added more functionality to existing tuple types
Parameters at the end are optional
Parameters can be applied as rest operators.

the optional tuple types

method function has two parameters, one is boolean other is tuple type. Tuple type which has b and c are optional

  
function method(a: boolean, b = 30, c?: string) {  
}  
  
method(true);  
method(true, undefined, "testvalue");  
method(true, 100);  

Rest Operator tuple types

here function method requires zero or more numbers

  
function method(...a: number[]) {  
}  
method();  
method(1,3);  
method(2);  

Unknown type

It introduced a new inbuilt type unknown type. We already saw any type in typescript that accepts any type of value. Any type does not do any type check before assigning its value or calling it.

The unknown type also has the same like any value, Any can be assigned to it.

The difference Any value can be assigned to the unknown type. But you can not access any variables/access/call those unknown types.

Any example usage

let anyType: any = 50;  
// Below will compiles as anyType is of type 'any'  
anyType.prop;  
anyType();  
new anyType();  
method(anyType);  
anyType `test example!`;  
  
function method(str: string) {  
    return str.toLowerCase();  
}  

unknown type example

let anyType: unknown = 50;  
// Below will not compile  as anyType is of type 'unknown'  
anyType.prop;  
anyType();  
new anyType();  
method(anyType);  
anyType `test example!`;  
  
function method(str: string) {  
    return str.toLowerCase();  
}  

IDE Support

There is different Editors' support for the latest typescript release.

• Visual Studio Code
• Sublime text 3 - typescript plugin
• Visual Studio code