TypeScript: static analysis, autocompletion and a little ES6 for JavaScript

Web applications such as mail, maps, word processors, and collaboration tools have become an integral part of our life. The TypeScript programming language was designed to meet the needs of the developers of such applications. It facilitates the definition of interfaces between software components, helps to study the behavior of existing JavaScript libraries, reduces the risk of name clashes by organizing code into dynamically loadable modules. The TypeScript type system (which is by the way optional) allows using such high-performance tools and development techniques as static analysis, symbolic navigation, autocompletion and code refactoring.

TypeScript - syntactic sugar for JavaScript. TypeScript syntax is a superset of EcmaScript 5 (ES5) syntax. Every JavaScript program is a valid TypeScript program. The TypeScript compiler performs only local file conversions and does not make any variable overrides. This allows you to write code as close as possible to the original JavaScript. TypeScript does not change the names of variables, making the debugging process predictable. The compiler also provides source maps.

Type system

In my opinion, this is the main TypeScript feature that is worth trying in action. The optional type system, through annotations directly in the code, allows you to impose restrictions on the capabilities of JavaScript, as well as use tools that enforce these restrictions. To minimize the number of annotations, TypeScript makes extensive use of type inference. This feature allows you to use autocompletion, to indicate the incompatibility of types, which is so lacking in the development of complex JavaScript applications. Value types in TypeScript are specified directly in the code:

function process(x: number, y: number) { var v = x + y; return v; } 

')
You can also specify the type of the return value (although in this case the type system itself is able to determine the type):

 function process(x: number, y: number): number { var v = x + y; return v; } 

For objects, you can specify types through interfaces:

 interface Thing { a: number; b: string; foo(s: string): string; } 

Such ads can be combined into separate files. They resemble header files in C, C ++. You can write descriptions not only for new programs, but also for existing libraries. TypeScript offers ready-made descriptions for Node.js, jQuery, DOM.

Classes and modules

TypeScript syntax includes several features offered by EcmaScript 6 (ES6), in particular classes and modules. Example class in TypeScript:

 class Point { x: number; y: number; constructor (x: number, y: number) { this.x = x; this.y = y; } dist () { return Math.sqrt(this.x * this.x + this.y * this.y); } static origin = new Point(0, 0); } var p = new Point(10, 20); var dist = p.dist(); var zeroPoint = Point.origin; 

TypeScript modules use existing CommonJS, AMD approaches to implement a modular system.

Module example:

 module Acme.Core.Utils { export class Tracker { count = 0; start () { windows.onmouse = e => { console.log(this.count); }; } } } import ACU = Acme.Core.Utils; var t = new ACU.Tracker(); t.start(); 

Here we also see another new feature of EcmaScript 6 - the short syntax of functions. In addition to their brevity, these functions have a lexical context, which allows to avoid problems in situations where a dynamic context is undesirable (for example, event handling, asynchronous operations).

Conclusion

Thus, TypeScript is a lightweight syntax sugar for JavaScript, a preprocessor that can significantly improve your performance by allowing you to use a rich set of tools, while maintaining compatibility with existing code and continuing to use your favorite JavaScript libraries.

Official site: www.typescriptlang.org
Installation for dedicated: npm install -g typescript
Interactive console: www.typescriptlang.org/Playground
Excellent video presentation from Anders Hejlsberg: channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript