Typescript 1.8: a lot of new and useful

Greetings, colleagues. This Friday, Microsoft released the beta version of Typescript 1.8, in which surprisingly many very useful javascript developer pieces. We at voximplant recently started rewriting our web sdk into typescript, and in my experience I can say with confidence that the compiler’s benefits are immense. It allows you to combine the best of what is in statically and dynamically typed languages: in the beginning, you quickly write javascript code, not caring about types and experimenting with architecture - and when the code “stabilizes”, add types where you see fit and thus shifts a bunch of checks to compiler shoulders. Under the cut, I will briefly review the key features of the new version and share my thoughts on their usefulness and practical applicability.

Installing the beta version

If you are adding typescript for the first time, then just run npm install , specifying the version with the beta ending:

npm install typescript@beta --save 

')
If you change the previous version to 1.8, then there is a small ambush waiting for us: in package.json, you need to register not typescript @ beta , but an unexpected ^ 1.8.0 :

  "dependencies": { "typescript": "^1.8.0" } 

Ability to compile javascript

When porting projects on typescript, javascript takes up a lot of time before the typescript syntax. Despite the fact that typescript is “backward compatible” with javascript, it’s just that the renaming of the .js file in the .ts will not work: the compiler will produce a range of errors and errors. The same story with the connection of other javascript libraries: either .tsd file, or cast to the type any .

The new flag allowJs allows to solve this problem: now typescript can compile javascript files along with typescript. So, the porting of an existing project can be started without changing the code at all, and then gradually bring the files to the typescript syntax:

  tsc --allowJs --outDir out target_file.js 

Lightweight components for JSX

When the authors of ReactJS said that they would stuff HTML into JavaScript, everyone spat for a long time. But the concept was surprisingly viable, and the syntax caught on. And after a while, facebook noticed that a significant part of the components created are rather lightweight - they render a piece of the user interface based on their state, and that’s all. To support the good beginning, the ability to create components based on functions, not classes, was added to the JSX syntax. With the new typescript, the same syntax can be used in TSX files:

 let SimpleGreeter = ({name = 'world'}) => <div>Hello, {name}</div>; 

By the way, the JSX syntax is now highlighted in Visual Studio, which makes development for Windows even more convenient. Especially in the light of the free Visual Studio Community Edition. Vim with Emacs is certainly steering, and WebStorm is very good - but Visual Studio is Visual Studio. Stuck good and useful. And starting with this version, the typescript compiler is also distributed as a nuget package .

Types as limitations

In typescript, there is a remarkable “constraints” functionality that allows you to limit the allowed types in various ways. For example, if we want to make a template function that would accept arguments with the specified interface, we can specify this restriction inside the angle brackets:

 function foo<T extends SomeInterface>(arg: T) {} 

In the new version, this mechanism has significantly expanded: now types can refer to each other, which allows to describe complex constraints:

 function assign<T extends U, U>(target: T, source: U) {} 

Code path analysis

The new version of the typescript compiler is trained to report potential problems with the code when the code itself is syntactically correct, but the programmer hardly meant IT:

• Code that is never executed (for example, code after return).
• Unused tags.
• The function in the body of which is return, but at the end there is no return.
• Forgot break in case.

Compiler behavior for these cases can be configured using these parameters .

Monkey-patch modules

In the new version of typescript, you can override the types and methods declared in other modules. Among other things, this allows in a few lines of code to correct errors in other people's type definition. Yes, it looks like a dirty hack, but it allows you to quickly write and check the code, so that in a relaxed atmosphere you can do everything by Feng Shui:

 import { Observable } from "./observable"; //   "./observable" declare module "./observable" { //     interface Observable<T> { map<U>(proj: (el: T) => U): Observable<U>; } } 

Valid Values ​​for Strings

The most, in my opinion, a useful innovation. It is considered good practice to use enum for enumerated values, and by no means strings. Why? Because in the string value you can make a typo and no one will ever know about it. Now - find out. The new typescript allows you to specify what values ​​a string can take, and checks your code at the compilation stage:

 interface AnimationOptions { deltaX: number; deltaY: number; easing: "ease-in" | "ease-out" | "ease-in-out"; } 

Loop variable closure

As suggested in the impwx comments, you can now use the loop variable without any fear if it is declared as let . It will have a local scope and each closure will get its value. This code will display numbers from 0 to 4, and not as usual:

 let list = []; for (let i = 0; i < 5; i++) { list.push(() => i); } list.forEach(f => console.log(f())); 

Comments in tsconfig.json

Of course, json with comments is no longer quite json - but convenient. I really hope that the same thing will someday be done for npm :

 { "compilerOptions": { "target": "ES2015", // running on node v5, yaay! "sourceMap": true // makes debugging easier }, /* * Excluded files */ "exclude": [ "file.d.ts" ] } 

Also in the simplification menu for working with ReactJS , removing restrictions with --project , color error messages, “type guards”, checks for the “for ... in” cycle and many other minor improvements that you can find a complete list of here. .