My talk at React.js Conf is on exactly this topic: how to integrate React and TypeScript. For JSX the approach I recommend is a bit of a hack but works quite well. You basically tag the JSX in such a way that the IDE is happy. Then in a precompile step you find, transform, and replace the JSX[1] prior to passing to TypeScript for final compilation. You lose out on intellisense and autocompletion but you still get type-checking and can still use some ES6 features in your JSX like fat arrows.

1. https://github.com/jbrantly/ts-jsx-loader (for webpack, but basic approach works in gulp/grunt as well)

Maybe off topic but I've been wondering whether many people are finding spending time on TS worthwhile?

Given the improvements in ES6, the fact that the JS community in general is so active, and the fact that I've seen some truly awful TS code (mainly where the devs want to pretend the web doesn't exist) I've been put off exploring TS too far much (beyond looking at the basic language features).

I'm not sure if I should be rethinking though?

> seen some truly awful TS code (mainly where the devs want to pretend the web doesn't exist)

I agree. Typescript is an impressive project, but most of the Typescript code I see looks more like C# or Java than Javascript. Sadly, it seems to have been created to accommodate that kind of approach.

But there's a lot to be said for strong and static typing when dealing with large projects.

That's why I'm hopeful for Flow, Facebook's new project to add static typing to Javascript:

https://github.com/facebook/flow

Yeah the stuff I've seen looks to me like poorly written C# consciously written in a Web-ignorant style, thoroughly at odds with whats going on in the Web/JS community generally.

Anyway totally agree on the typing angle, navigation/refactoring/discover-ability aspects are useful and I loved the implicit interface approach in Dart. However I wonder whether some of those features won't be added to JS over time (where possible in such a dynamic language). Ta for link to flow, will give it a look thanks.

Could you give some examples of what you mean with "web ignorant"?

After quite some consideration I chose to convert my ActionScript3 project to TypeScript. I knew I had to move away from flash for a while, and personally I really prefer to code big framework-like projects with static typing, so I gave it a go and it I have to say it has been really enjoyable. My code looks really neat, and unlike many other comments here, my code is very much targeted at the web and bound to how js normally works. It's just more beautiful and well organised in my opinion. I've been using the WebStorm IDE and the intellisense features are really nice. Getting React to work with typescript was a bit of a hassle, but worked pretty well after some research, just not when I tried to make components that extend other components. Not sure if that will work with this React release, but being able to use plain typescript classes was certainly high on my wishlist, so this makes me really happy.

Sorry yeah wasn't meaning to infer you couldn't write beautiful Web embracing code in TS. However most of the code I've seen using TS, and admittedly its a small sample, was of the other sort so I wasn't sure if that's the way the TS community is pulling.

Our problem with TypeScript is not TypeScript but its community and ecosystem for the most part (I think that's a way I would put it).

It's the first time I heard that, though I admit I'm not really actively involved in any type of TS community. All I've been in contact with are the TS releases and blogpost from the TS development team, for which I can only give credits (quite fast and stable development with good features), and some TS projects and definition files for existing libraries I found on github which were pretty decent and helpful. As naive as this question may be, can you tell me more about what parts of the ecosystem or which community you mean?

The homepage, forums and press releases do seem really focus on Visual Studio. I guess that's understandable given it's an MS product.

There are a couple of links to editor syntax files and a link to WebStorm but they're a bit of an after thought.

I keep expecting the homepage update "any day now" but so far I've only really seen VS mentioned as a default environment.

Ah yes, true. I've always thaught of it as understandable that they focus on Visual Studio, but I too would much appriciate it if they would push that a bit less. I did try the free version of VS when I started with TS, but I didnt prefer it to webstorm, even though in some small details, the ts support may be slightly better.

I'm just too lazy to write the tests that a type checker will do for me. It's not just laziness though it's the idea of writing all that redundant code. (Too lazy to reverse engineer typeless code too)

The 'Type' in TypeScript.

?

Similarly, I'm looking for a way to use react with HAML. I just can't give it up, I have absolutely no interest in closing my tags ever again.

One of the things I like about angular is how it deals with standard HTML. HAML doesn't care about its wacky attributes. Whats the best way to achieve this with react? Does the JSX compiler have hooks for preprocessing of any kind?

It wouldn't work with Typescript, but this is what my vanilla CoffeeScript React code looks like:

    div
      className: 'navbar-form'
      style: 
        backgroundColor: "green"
      ,
      div
        className: 'btn-group'
        ,
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleDecreaseWpmClick
          ,
          span
            className: 'glyphicon glyphicon-chevron-down'
        span
          className: 'btn btn-default disabled'
          ,
          "#{ @props.status.get('wpm') }"
          span
            className: 'hidden-xs'
            ,
            " wpm"
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleIncreaseWpmClick
          ,
          span
            className: 'glyphicon glyphicon-chevron-up'

(For the curious, "wpm" is short for "words per minute" - this is straight out of my code for http://splashreaderapp.com. More code at http://github.com/rattrayalex/splashreaderapp)

Pretty sure you can lose all of those single line "," and make it a bit nicer.

    div
      className: 'navbar-form'
      style: 
        backgroundColor: "green"
      div
        className: 'btn-group'
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleDecreaseWpmClick
          span
            className: 'glyphicon glyphicon-chevron-down'
        span
          className: 'btn btn-default disabled'
          "#{ @props.status.get('wpm') }"
          span
            className: 'hidden-xs'
            " wpm"
        button
          type: 'button'
          className: 'btn btn-warning'
          onClick: @handleIncreaseWpmClick
          span
            className: 'glyphicon glyphicon-chevron-up'

Well JSX is just compiled to JS so I guess you could have something that looks like HAML that substitutes the JSX code which in turn is compiled into JS.

Best place to start I guess would be to look into the JSX compiler to see how complicated that would be.

Well if I can get the JSX compiler to give me a hook every time it finds an "html" block, and to let me replace it with my own content, then that would work fine I guess. Then it'd be a matter of getting JSX to recognise haml syntax as html.

Not what you're looking for exactly, but you could settle for using Jade? https://github.com/duncanbeevers/jade-react

Looks nice. Just a heads up though it uses React.DOM to create your tags which has been deprecated (and possibly won't be available anymore come 0.13).

React.DOM is still in 0.13.

Thanks, good to know. That gives us a nice path to upgrade our CoffeeScript components.

It's not quite the same as HAML, but you might try JSnoX: https://github.com/af/JSnoX

I am assuming you could use coffeescript as well?

I'm using Typescript + React for quite a big project, and I'm really happy with it (and even more happy with how things will work soon with this release). True, not being able to use JSX is a really big minus. Personally I'm fine with the js style "HTML.div({properties},children)" for now, and there are some people trying to get TS + JSX to work, (see https://github.com/ripieno/typescript-react-jsx and https://github.com/fdecampredon/jsx-typescript) havn't tried it myself yet, but I have good hopes this will work properly some time soon