DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for πŸ”₯πŸ”₯ Typescript New Version Features
Stacksjar
Stacksjar

Posted on

πŸ”₯πŸ”₯ Typescript New Version Features

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

Typescript announced its Beta version 4.3 on 1st April 2021, to install this version you could use bellow command

npm install typescript@beta

Template String Type Improvements
New version introduces template literal types for contextually typed template literal expressions.Due to which when inferring to a template literal target type, typescript now permits the source type to also be a template literal type.

Below are some examples of improved assignment relations:

type Color = "red" | "blue";
type Quantity = "one" | "two";

type SeussFish = `${Quantity | Color} fish`;
// same as
//  type SeussFish = "one fish" | "two fish"
//         | "red fish" | "blue fish";
…or match patterns of other string-like types.

declare let s1: `${number}-${number}-${number}`;
declare let s2: `1-2-3`;

// Works!
s1 = s2;
Enter fullscreen mode Exit fullscreen mode

Always-Truthy Promise Checks
Added support for throwing error for missing await in conditionals

Typescript new Updates Stacksjar.com

static Index Signatures
Index signatures allow us set more properties on a value than a type explicitly declares. With latest version index signatures can now be declared as static.

Import Statement Completions
Improved Auto-imports statements, made easier and more reliable, When user start writing an import statement that doesn’t have a path, typescript will provide them with a list of possible imports. When user commit a completion, it’ll complete the full import statement, including the path that user were going to write.

Below is the example of auto imports with latest version of typescript

Editor Support for @link Tags
TypeScript can now understand @link tags, and will try to resolve declarations that they link to. What this means is that you’ll be able to hover over names within @link tags and get quick information, or use commands like go-to-definition or find-all-references.

For example, you’ll be able to go-to-definition on bar in @link bar in the example below and a TypeScript-supported editor will jump to barβ€˜s function declaration.

/**
 * This function depends on {@link bar}
 */
function foo() {

}

function bar() {

}

Enter fullscreen mode Exit fullscreen mode

Union Enums Cannot Be Compared to Arbitrary Numbers
Solved issue about Certain enums are considered union enums when their members are either automatically filled in, or trivially written. In those cases, an enum can recall each value that it potentially represents.

In the new version, if a variable with a union enum type is compared with a numeric literal that it could never be equal to, then the type-checker will issue an error.

enum E {
 A = 0,
 B = 1,
}

function doSomething(x: E) {
 // Error! This condition will always return 'false' since the types 'E' and '-1' have no overlap.
 if (x === -1) {
  // ...
 }
}

//As a workaround, you can re-write an annotation to include the appropriate literal type.

// Include -1 in the type, if we're really certain that -1 can come through.
function doSomething(x: E | -1) {
 if (x === -1) {
  // ...
 }
}


//You can also use a type-assertion on the value.
function doSomething(x: E) {
 // Use a type asertion on 'x' because we know we're not actually just dealing with values from 'E'.
 if ((x as number) === -1) {
  // ...
 }
}
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can re-declare your enum to have a non-trivial initializer so that any number is both assignable and comparable to that enum. This may be useful if the intent is for the enum to specify a few well-known values.

enum E {
 // the leading + on 0 opts TypeScript out of inferring a union enum.
 A = +0,
 B = 1,
}
Enter fullscreen mode Exit fullscreen mode

If you want to read the complete article you can checkout here.

Happy Coding!

For more Details Checkout the Article here:- Typescript New Version Features

Top comments (4)

Collapse
stacksjar profile image
Stacksjar Author

Note: This was an old post which had some corrections so it was updated, don't get confused because the date is also now showing the updated one along with the post.

Collapse
eshimischi profile image
Info Comment hidden by post author - thread only accessible via permalink
eshimischi

Typescript announced its Beta version 4.3 on 1st April 2021

What? We returned back to the past? Typescript 4.9 in beta at the moment.

Collapse
stacksjar profile image
Stacksjar Author • Edited on

You are right but this was an old post which had some corrections so it was updated, the confusion occurred because the date is also now showing the updated one along with the post.

Some comments have been hidden by the post's author - find out more

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.