Announcing TypeScript 1.6

Jonathan Turner [MS]

Today, we’re happy to announce the release of TypeScript 1.6.  This release adds support for React/JSX, class expressions, and a rich set of new capabilities in the type system. It also provides stricter type checking for object literals.

You can download TypeScript 1.6 for Visual Studio 2015, Visual Studio 2013, on npm, or as source.

React/JSX

Designed with feedback from React experts and the React team, we’ve built full-featured support for React typing and the JSX support in React.  Below, you can see TypeScript code happily coexisting with JSX syntax within a single file with the new .tsx extension. This allows React developers to intermingle HTML-like syntax with TypeScript code.

Our goal was to make it feel natural to work with React/JSX and to have all the type-checking and autocomplete capabilities of TypeScript.  This allows you a rich editing experience for working with React and JSX when using VS, VS Code, and Sublime. 

Class expressions

This release also makes it possible to write class expressions, as we continue to round out the ES6 support in TypeScript.  Similar to class declarations, class expressions allow you to create new classes.  Unlike class declarations, you can use class expressions wherever you use an expression.  For example, you can now create a class and use it in your extends clause.

class StateHandler extends class { reset() { return true; } } {
   constructor() {
     super();
   }
}

var g = new StateHandler();
g.reset();

This class can be anonymous and still has all the same capabilities of class declarations. 

User defined type guards

In earlier versions of TypeScript, you could use if statements to narrow the type. For example, you could use:

if (typeof x === “number”) { … }

This helped type information flow into common ways of working with types at runtime (inspired by some of the other projects doing typechecking of JS). While this approach is powerful, we wanted to push it a bit further.  In 1.6, you can now create your own type guard functions:

interface Animal {name: string; }
interface Cat extends Animal { meow(); }

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
}

This allows you to work with not only typeof and instanceof checks, which need a type that JavaScript understands, but now you can work with interfaces and do custom analysis.  Guard functions are denoted by their “a is X” return type, which returns boolean and signals to the compiler if what the expected type now is.

Intersection types

Common patterns in JS that haven’t been easy to express in TypeScript are mixins and extending existing classes with new methods.  To help with this, we’re adding a new type operator ‘&’ that will combine two types together.  While it was possible to do this before by creating a new interface that inherited from two other types, this tended to be clunky and couldn’t be used in the case you wanted to use it most: combining generic types.

This new & operator, called intersection, creates anonymous combinations of types.

function extend<T, U>(first: T, second: U): T & U {
  let result = <T & U> {};
  for (let id in first) {
    result[id] = first[id];
  }

  for (let id in second) {
    if (!result.hasOwnProperty(id)) {
      result[id] = second[id];
    }
  }
  return result;
}

var x = extend({ a: “hello” }, { b: 42 });
x.a; // works
x.b; // works 

Jonathan Turner [MS]

Follow