JSX and as operator

[Ryan Cavanaugh (RyanCavanaugh)]

This implements JSX parsing, typechecking, JSX emit, and React emit as specified in #3203, as well as the as operator suggested in #296.

Each commit between 556cb70 and a5c44a3 contains a disjoint set of files for easier browsing. Commits after the Baseline-accept commit will be touching arbitrary files.

[Daniel Rosenwasser (DanielRosenwasser)]

Double quotes on these.

[Ryan Cavanaugh (RyanCavanaugh)]

✔️

[Basarat Ali Syed (basarat)]

Chad Tolkien (@ctolkien) just pushed atom-typescript version v4.8.0 that uses this so you guys can do development with it, I have a sample view as well : https://github.com/TypeStrong/atom-typescript/blob/master/lib/main/atom/views/rView.tsx . Also there is https://github.com/basarat/ntypescript/ for the command line tooling

Ryan Cavanaugh (@RyanCavanaugh) love at first sight 🌹

[Jason Imison (nosami)]

Basarat Ali Syed (@basarat) nice :)

[Tom Jacques (tejacques)]

This is great! Really excited to be able to use JSX in TypeScript.

Not sure where best to voice this, so I'll mention it here -- is it a concern that the semantics of as are different in TypeScript compared to C#?

The Facebook devs working on Flow chose to deal with casts by reusing the colon notation, e.g.:

varfoo: bar={}: bar

The type annotations used between Flow and TypeScript are very similar otherwise, I'd love to see the similarities grow where possible to potentially improve the odds of ECMAScript standardization as well as tool interoperability.

[Ryan Cavanaugh (RyanCavanaugh)]

TypeScript already has many keywords/oprators that are the same as in other languages; adding one more isn't particularly interesting IMHO. Because none of our type-related syntax has runtime semantics, it shouldn't be too confusing that as doesn't either. It's similar problem as how <number>x doesn't perform the same coercion as (int)x in C.

The flow-style assertion was discussed briefly at #3203 (comment). I'd also try to chime in at issue #296 for further discussion if you're interested.

[Lennart (Lenne231)]

Is it possible to emit react elements as defined in https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html under "Third-party Languages" instead of React.createElement(...)so that we don't need to import React?

[Ryan Cavanaugh (RyanCavanaugh)]

You can use --jsx preserve to emit JSX and then use the JSX transformer of your choice.

We'll be looking at what kind of JSX emit people find the most useful to see if it's worth the cost to add them to TypeScript directly.

[Lennart (Lenne231)]

Ok. There should be at least a compiler error if TypeScript emits React.createElement(...) but React is not in scope.

[Claudia Meadows (dead-claudia)]

Yeah...such a pragma is nice. Other places where JSX is used outside of React:

• Mithril (MSX has gained some popularity within that community)
• Deku (they seem to prefer that syntax)
• Mercury
• virtual-dom

[vilicvane (vilicvane)]

Does this mean Facebook is joining the TypeScript ecosystem along with Google?

[Ryan Cavanaugh (RyanCavanaugh)]

Other places where JSX is used outside of React:

Thanks for the list! Keep it coming -- it's good for us to understand what other JSX transforms we might need to support.

Does this mean Facebook is joining the TypeScript ecosystem along with Google?

No 😞

[Mike Morton (mikemorton)]

Pretty cool that the atom editor is already integrated with this. Does anyone have any advice for getting visual studio to use the 1.6 compiler?

[Mohamed Hegazy (mhegazy)]

you can enable DevMode and get VS to work on the latest drops from master.

[Mike Morton (mikemorton)]

Thanks Mohamed Hegazy (@mhegazy) - I tried that but I'm finding visual studio is still not doing syntax highlighting on my tsx files and is complaining when I refer to them from .ts files. Would you expect DevMode to resolve that issue?

[Dan Quirk (danquirk)]

Mike Morton (@mikemorton) unfortunately not. DevMode updates the TypeScript portion of the language service but things like how we understand/interpret file type associations live in the part of Visual Studio code that needs to be installed via a published update.

You could also try Atom's TypeScript plugin today.

[François REMY (FremyCompany)]

Does anyone working on this have any idea on how I could get this to work with Mithril?
PS: I had a look at mithril.d.ts but it doesn't include JSX definitions, and I'm not sure I understand how I can make one that would work with Mithril conventions.

[Dan Quirk (danquirk)]

François REMY (@FremyCompany) I would try StackOverflow, comments on PRs should really be specifically about the change and any implementation issues

[François REMY (FremyCompany)]

Dan Quirk (@danquirk) Thanks I'll wait for 1.6 to be more broadly supported and head towards StackOverflow at that time. I delete my comment feel free to do the same.