Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Typescript to Support React

Typescript to Support React

This item in japanese


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


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.

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

Community comments

  • Very soon Dart language will replace Javascript

    by Andrew Mezoni,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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

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