41

I'm somewhat familiar with TypeScript and have recently been made aware of JSX. They both seem to be similar to me. I looked at the comparison to JSX on this website and they compared it to Dart and some other technologies but not to TypeScript.

TypeScript and JSX appear to both compile to JavaScript and provide static typing and classes, but they seem to be complementary and not competitors according to a few places on the web such as TypeScript and JSX.

I'm trying to make this not too open ended, so can someone tell me what features TypeScript offers that JSX doesn't and vice versa?

spyle
  • 1,960
  • 26
  • 23
Eric
  • 2,861
  • 6
  • 28
  • 59
  • 20
    You are confusing two things. The first article you linked to is about a language called `JSX`. The article is from 2002, and the [github of it](https://github.com/jsx/JSX/) also hasn't been updated in 4 years. The 2nd article you linked to is about part of the [facebook react library](https://facebook.github.io/react/) which includes a [syntax called JSX](https://facebook.github.io/jsx/) which can work with typescript (it's called TSX) – Nitzan Tomer Nov 03 '16 at 20:49
  • Thanks, that clarifies things. I think that your comment is the answer to my question. – Eric Nov 03 '16 at 21:08
  • @NitzanTomer I am glad I read your comment. Why do they have to create this confusion anyway?!! It is so annoying! – Willa Feb 09 '17 at 04:15
  • @Willa Who created confusion? Two completely different things that are simply named the same. I don't think that either one was aware of the other – Nitzan Tomer Feb 09 '17 at 08:37
  • @NitzanTomer well since JSX language compile to javascript, having another standard that works with javascript named the same is exactly the issue here. It is one thing to have two completely unrelated items sharing the same name but quite another having a situation like this. – Willa Feb 09 '17 at 22:19
  • @Willa Well, I don't think that this `JSX` language attracted enough people to make facebook to care about it. – Nitzan Tomer Feb 09 '17 at 22:47
  • 2
    @Eric could you change your accepted answer? The one that you accepted is misleading. – Xam Jan 23 '19 at 21:39

3 Answers3

147

The original answer is insufficient and not up to date with the current standards.

JSX is NOT a language. It's NOTHING BUT Javascript but with a different extension. Facebook came up with this new extension so that they can demarcate the XML-like implementation of HTML in JavaScript. In early versions of React, this extension was mandatory for writing HTML inside JavaScript. However, this restriction was removed a few years ago which basically meant that there is no difference at all in JS and JSX. (Using only .js extension is the standard norm nowadays BTW)

Coming to TypeScript, it is a SUPERSET of JavaScript which adds extra functionalities to plain JavaScript making the applications more robust. Watch this video for better understanding of TypeScript: https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

To conclude, JSX = JS, typescript is a superset of Javascript, and there is no comparison between JSX and TypeScript.

saran3h
  • 12,353
  • 4
  • 42
  • 54
  • 8
    This seems a better answer than the answer accepted. – YugoAmaryl May 23 '18 at 09:52
  • Thx, so is it better to use Typescript? – Jay Jul 19 '18 at 16:39
  • 2
    @Jay It generally is if you have a large project. It provides static type checking so your compiler will be aware of what type a variable is before it actually instantiate the object of it. There is much better(richer) intellisense support for TypeScript as compared to javascript. Debugging is easy although if you know how to work with source maps it doesn't matter. And the best thing is interoperability so going from Javascript to Typescript could be as easy as renaming your files from '.js' to '.ts' – saran3h Jul 20 '18 at 07:49
  • Cool thanks. As I already know Typescript with Angular thought of trying Typescript instead of JSX. – Jay Jul 20 '18 at 10:13
  • 1
    There is a statically typed object-oriented language that compiles to vanilla JavaScript called [JSX](http://jsx.github.io/), which is often confused with React’s JSX as you have just done. The OP is probably asking about the differences between TypeScript and JSX the language. – chharvey Mar 04 '19 at 05:23
  • 1
    It's possible @saran3h was referring to JSX the language https://jsx.github.io, not to the Facebook's https://facebook.github.io/jsx which is an XML-like syntax extension to JavaScript. – Arialdo Martini Sep 16 '19 at 14:12
  • CH Harvey got it right. Four years ago some people at work were talking about React JSX and using that together with Typscript with which I had passing familiarity. I did some research and came across the statically typed OO language JSX and was confused why you would want to use both that JSX and Typscript since they both do more or less the same thing. The original response explained that I was mixing up two different JSX libraries which cleared up my confusion. I'm surprised this posting has gotten so many comments over the years. The original response answered my question. – Eric Mar 06 '20 at 01:45
  • Both, JSX and TypeScript are JavaScript language extensions, and they serve different purpose, they do not compete. You need special pre-processor (or "compiler", such as Babel) to convert JSX or TypeScript into standard JavaScript version of specific browser supports. JSX adds html-like objects, and TypeScript adds support for "strict types" so that you cannot mistakenly assign Integer to String. TypeScript supports JSX. – Fuad Efendi Jul 25 '20 at 19:54
3

I will try to give you a brief answer. In my experience, something great about TSX is that it will avoid some errors immediately, it has static typing, it is easy to maintain and you can use OPP (Yes, similar to Java). JSX is very similar to JS, you don't have to define the type of data (dynamically typed), a lot of freedom and easy to understand.

dotconde
  • 31
  • 1
  • 5
-13

Comparing the two is a bit like apples and oranges. JSX is a language and TypeScript can compile to it. I suggest that you read up on it here: http://www.typescriptlang.org/docs/handbook/jsx.html

vbguyny
  • 1,170
  • 1
  • 10
  • 29
  • 2
    Surely JSX and TypeScript are both languages, both of which transpile into Javascript? The link you've included seems to describe how JSX can be embedded _within_ Typescript and transpiled along with it? – Dan King Jun 29 '17 at 09:46
  • 8
    @DanKing actually it seems the above (accepted) answer got it backwards. TypeScript is a language that is a syntactic-superset of JavaScript. JSX is FaceBook's XML-like syntax extension to JavaScript, not a language per se. – C S Jul 10 '17 at 15:33
  • 1
    @vbguyny what you have provided as information is regarding TypeScript and Facebook JSX extention which has nothing to do with the DeNA JSX. – Tek Oct 06 '17 at 09:08
  • 1
    There are two **JSX**s being talked about here. Unfortunately, they are two completely different things that have the same name. [JSX the language](http://jsx.github.io/) is a statically typed, object-oriented language that compiles into vanilla JS (just like TypeScript does). On the other hand, [React’s JSX](https://reactjs.org/docs/introducing-jsx.html) is an XML-like expression embedded directly within JS (really it’s just syntactic sugar for the `React.createElement()` function). See StackOverflow’s tags *[jsx]* and *[react-jsx]* respectively. – chharvey Mar 04 '19 at 05:14