Understanding typescript 3.0 features - examples

Latest Typescript update

Typescript 3.0 arrived and released in July 2018.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

This is a major feature which will be helpful for larger projects. basically, Modularize your bigger project into the 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 typescript configuration file tsconfig.jso. 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 named type but it 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 operator

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 new inbuilt type unknown type We already saw any type in typescript which accepts any type of value. Any type doe's not done any type check before assigning its value or calling it. The unknown type also has 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 type

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 are different Editors support for latest typescript release.

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