Microsoft have released the beta for TypeScript 1.6, bringing with it support for React.
In the blog post Announcing TypeScript 1.6 Beta: React/JSX, better error checking, and more, program manager Jonathan Turner explained that while the TypeScript team had collaborated with teams responsible for libraries including Dojo, Aurelia, and Angular, he said React is "an important library" that that had been difficult for TypeScript developers.
Turner said:
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.
Turner continues that version 1.6 introduces a new .tsx file extension that "enables JSX inside of TypeScript files, and makes the new ‘as’ operator the default way to cast." In the process adding full support for working with React/JSX in TypeScript.
On Hacker News, responses to the announcement were mixed but mostly positive. User jschrf commented "Happy to see such uptake in TypeScript, and it's great that big frameworks such as Dojo 2.0 and Angular 2.0 are adopting it, but I can't help but feel a bit weird, and slightly disappointed, that JSX found its way in."
TheAnimus responded "As someone whose organisation has spent a lot of time making our front end in ReactJS this is going to be very useful for us, and the 'corruption' that is the cast operator becoming 'as' will be manageable as it's only in .tsx files."
Other improvements with TypeScript 1.6 include upgraded object checking rules, with objects matching more closely when they are assigned. Turner gives the below 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
He says "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."
Other new features in the 1.6 release include ES6 generators with added support for class expressions. A full list of features can be found on the roadmap here.
