Announcing TypeScript 1.6 Beta: React/JSX, better error checking, and more

Luke Hoban [MS]

September 2nd, 20150 0

Today, we’re making a beta of the upcoming TypeScript 1.6 available. There are a bunch of new features coming in the 1.6 release, and we wanted to give you a preview of these features and time to give us feedback.

You can get this for Visual Studio 2015, Visual Studio 2013, NPM, and source.

React/JSX support

One of the key philosophies of TypeScript is to let you write TypeScript anywhere you can develop using JavaScript. While we’ve worked with teams such as Dojo, Aurelia, and Angular to ensure using TypeScript is as easy as using JavaScript, there was still an important library that that presented a difficulty for TypeScript developers: React. This was due to the lack of support for JSX, a popular way of writing DOM and native components in JS. React heavily leverages JSX in everyday code. Unfortunately, the syntax for JSX conflicted with the cast syntax that TypeScript already used.

Refactoring JSX members in TypeScript (click to watch animation)

In 1.6, we’ve introduced a new .tsx file extension. This extension does two things: it enables JSX inside of TypeScript files, and it makes the new ‘as’ operator the default way to cast. With this, we’ve added full support for working with React/JSX in TypeScript in a type-safe way.

Catching more errors

Starting with 1.6, we’re tightening up some of our object checking rules. In the beta, you’ll see that objects need to match more closely when they are assigned. For example:

var x: { foo: number };
x = { foo: 1, baz: 2 }; // Error, excess property ‘baz’, but not caught before 1.6

var y: { foo: number, bar?: number };
y = { foo: 1, baz: 2 }; // Error, excess or misspelled property ‘baz’, also not caught before 1.6

When fields are optional, it’s easy to accidentally pass mistyped fields or miss when a refactoring has left excess fields. This change has already helped to find dozens (if not hundreds) of real-world bugs in early adopter code. As part of this change, we found bugs in DefinitelyTyped (including the tests that are used to validate the hand-written .d.ts files):

Examples of the errors caught with the new rules

While this change may show where bugs have been hiding previously, you may not be ready to tackle a new set of compiler errors in your existing code right away, or you may not want to change the way your code behaves. There’s a good list of ways to work around this assignment check, depending on the capability you want your code to have.

EDIT: You can also suppress this warning by passing the –suppressExcessPropertyErrors compiler option.

Improved module resolution

Previously, TypeScript used a hybrid approach for resolving both CommonJS and RequireJS. Unfortunately, this meant that module resolution didn’t feel at home in either style, and instead made you structure projects in a way that didn’t feel natural for that particular module loader.

We’re working on a set of improvements to make module resolution more natural. In the 1.6 beta, you’ll see the start of that work. We invite you to read more on what we’re working on and send us your feedback.

And more

We’ve continued to improve ES6 support with added support for class expressions and the start of support for generators. You can see the full list of new features on our roadmap. We’d love to hear your feedback.