TypeScript 1.6 release: not just React

Microsoft is actively releasing new versions of TypeScript. Fellow developers announced the release of a beta version of TS version 1.6 as much as the second of September. And already on September 16 release was released. Speed ​​guys. But at the same time, the release somehow went unnoticed (not for everyone, but still). On Habré somehow there was no mention (I did not find it). And therefore some information on improvements.

One of the powerful features of this version is native support for React / JSX syntax. But that's not all. Here is a list of some of the innovations:

• ES6 Generators
• Local Types
• Aliases for generic types
• Class expressions (anonymous classes)
• JSX support
• Abstract classes and methods
• New flag –init
• New section “exclude” in the configuration file tsconfig.json

Consider the most interesting of them. Go under the cat, if interested.

The entire list of innovations can be seen on the official page .
')

ES6 Generators

Everything is simple - you can now write function generators. They can be typed naturally. The generator interface looks like this:

interface Generator<TYield, TReturn, TNext> extends IterableIterator<TYield /*| TReturn*/> { next(n: TNext): IteratorResult<TYield /*|TReturn*/>; // throw and return methods elided } 

Usage example:

 interface Generator<TYield, TReturn, TNext> extends IterableIterator<TYield | TReturn> { next(n: TNext): IteratorResult<TYield | TReturn>; } function *g(): Generator<number, any, string> { let x = yield 0; // x   string } 

More examples can be found at github.com/Microsoft/TypeScript/issues/2873

Local Types

Another interesting innovation is local types. Now you can declare types within conditions, which expands the possibilities for meta programming. Example:

 function f() { if (true) { interface T { x: number } let v: T; vx = 5; } else { interface T { x: string } let v: T; vx = "hello"; } } 

It is also useful for declaring local types that will be available only in the current lexical context. This will get rid of the clogged global scope. Example:

 function f() { enum E { A, B, C } class C { x: E; } interface I { x: E; } type A = I[]; let a: A = [new C()]; a[0].x = EB; } 

More examples can be found at github.com/Microsoft/TypeScript/pull/3266

Aliases for generics

The new feature allows you to set aliases for generics. Code example:

 type Source<T> = T | (() => T); function unwrap<T>(p: Source<T>) { return (typeof p === "function") ? p() : p; } 

More examples can be found at github.com/Microsoft/TypeScript/issues/1616

Class expressions

We have always had the opportunity to declare classes. Now it is possible to describe class expressions. Such expressions are anonymous classes, by analogy with anonymous functions. Code example:

 var Rect = class { area: number; constructor(public length: number, public width: number) { this.area = this.length * this.width; } } var rect = new Rect(5, 10); var MyNode = class Node { next: Node; set nextNode(node: Node) { this.next = node; } constructor() {} } var node = new MyNode(); var nextNode = new MyNode(); node.nextNode = nextNode; 

Abstract classes

It's simple. We have the abstract keyword, which, like in other programming languages, is placed before the definition of a class and / or method. As a result, we can declare a class with an implementation, but you cannot create objects from it.

 type int = number; abstract class A { foo(): int { return bar(); } abstract bar() : int; } class B extends A { bar() { return 42; } } new A(); // Error! new B(); // OK 

User defined type guard functions

This is an interesting syntactic construct that allows you to describe verification functions without additional conditions. Examples:

 function isCat(a: Animal): a is Cat { return a.name === 'kitty'; } var x: Animal; if(isCat(x)) { x.meow(); // OK, x is Cat in this block } 

React / JSX = TSX

A new option - jsx react appeared in the compiler. If it is specified, then JSX syntax is transported directly in the TS files. More precisely even TSX (by analogy with JSX). An example of such a code:

 export interface ITodoItemState {} export interface ITodoItemProps { item: ITodo; onRemove?: (todo: ITodo) => any; key?: number; } export class TodoItem extends React.Component<ITodoItemProps, ITodoItemState> { constructor () { super(); this.removeItem = this.removeItem.bind(this); } removeItem () { this.props.onRemove(this.props.item); } render () { return ( <li> <span> {this.props.item.description} </span> <button onClick={this.removeItem} >delete</button> </li> ); } } 

Until today, in order to develop on React + TypeScript, one had to use either React templates (which we do in Tutu.ru), or completely abandon the JSX syntax. But now we have the opportunity to use JSX, as they say, out of the box. React lovers should like this.

There are two modes of operation:

• --jsx preserve - on output we get JSX
• --jsx react - on output we get processed JS

In general, it turned out a good alternative to Babel. I would even say that competition (in some things). If you are using BabelJS + Flow, then look at TS. It is more suitable for the enterprise. But this is my IMHO, so that the taste and color.