(typescript) Add JSX support to Typescript

[pkaminski]

There's a somewhat popular variant of TypeScript that incorporates JSX, and replaces TypeScript's normal angle-bracket casts with the as keyword. Source files typically end in .tsx. It would be nice to have a language definition for this -- it's not hard to make one, but not clear how to cleanly share the bulk of the definition with typescript.

Related issues: #878, Reviewable/Reviewable#285

[pkaminski]

Ping @isagalaev?

[isagalaev]

We'll get to this (and other) issues eventually. No estimates though, as there are too few of us…

[pkaminski]

OK, no problem -- I just noticed that this was the only open issue without a label so I was afraid you'd missed it. :)

[jakubrohleder]

Is there any progress on this? @pkaminski have you figured out any other solution?

Thanks :)

[pkaminski]

Nope, I don't have any workaround at this time, sorry.

[jakubrohleder]

Thanks for the answer. I'll use 'js' as language than, it looks good enough.

[joshgoebel]

Tagging this beginner friendly and help welcome incase @ddevault doesn't have time to see this thru to completition.

[joshgoebel]

This will be closed by #2568 when it closes.

[joshgoebel]

No. It's built into Typescript now just like Javascript. It's not a different grammar.

[bennycode]

@joshgoebel it would be much nicer to use tsx (rather than integrating it into ts) because IDEs might differentiate between ts and tsx.

My IDE (WebStorm) complains when writing TSX code inside of a ts code block:

But it does not complain when the code from above is inside of a tsx code block:

Unfortunately, highlight.js only renders syntax highlighting when using ts (and not tsx). 😥

[joshgoebel]

because IDEs might differentiate between ts and tsx.

But how is this relevant to us? If you just mean "people think of it as tsx"... then it seems like perhaps we should add an alias to typescript for tsx in addition to ts, so people could label it as such. That would make sense.

---

Right now our current grammar should "just work" regardless of whether you throw TS or TSX at it... meaning there is no need for two grammars. Having a separate TS grammar would be simpler in one or two regards (highlighting operators, no having to tell type annotations from HTML), but I dunno if having yet another variant is actually a good idea or not. Because if we went that way we'd really need 4:

• JS and JSX
• TS and TSX

Definitely something to keep in mind if I ever find the time to try and finish/flesh out our TSX support further.

[joshgoebel]

In fact since we already do this for jsx (an alias of JavaScript) seems obvious we should add the alias, yes?

[bennycode]

Using an alias sounds like a great idea. It will improve the developer experience for people like me who edit files, which are later highlighted by highlight.js, and want to have syntax support in their IDEs (which differentiate between TS and TSX).

[joshgoebel]

0c14f68