Typescript to Support React

| by James Chesters Follow 1 Followers on Sep 07, 2015. Estimated reading time: 1 minute |

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.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Very soon Dart language will replace Javascript by Andrew Mezoni

Typescript is a language with a bunch of features but very soon Dart language will replace Javascript (according to Google).
When Dart language will replace Javascript then everything in this world will enjoy with Dart.

Re: Very soon Dart language will replace Javascript by Mark N

Sadly, I think this is VHS vs Betamax. (JS being VHS)

Better does not always win/dominate. :(

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

2 Discuss

Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you