Typescript for Facebook React

Question

I've been looking into React lately and was hoping to use JSX and typescript. I haven't been able to find any resources on this or type definitions for React.

Can you use Typescript with JSX and are type definitions available?

Answer 1

React jsx will be available in upcomming TypeScript 1.6. Here's more info.

Answer 2

The React team is currently discussing making Typescript annotations an internally used thing. This may be changing on the official for you, soon.

Answer 3

François de Campredon created a type definition for React: https://github.com/fdecampredon/react-observe-todomvc/blob/typescript/src/declarations/react.d.ts

It does not support JSX obviously, since it is another language with a syntax different from TypeScript.

Answer 4

Update: old answer is no longer true. Typescript for some time supports separate syntax context with .tsx files, where it drops <> casting syntax in favor of JSX.

---

It won't. There is a lot of ambiguity between TypeScript type casting syntax:

(<foo>bar)

And JSX inline XML syntax:

(<foo>bar)</foo>)

Answer 5

Did some research and figured I'd answer my own question. It seems that the JSX compiler doesn't yet recognize typescript constructs (hopefully it will later).

Answer 6

With regard to jsx:

You could split your react components into two files. The first one would contain everything except of the render function and can therefore be written in Typescript. The second one would just implement the render function using JSX. I know this is against the 'react way', but it solves that problem. You would have the strength of Typescript every except of the render function.

Answer 7

You should check out the following talk:

https://www.youtube.com/watch?v=9PTa9-PPVAc

It has a lot of pointers as to how to make React work with TypeScript.

Facebook also recently announced a project called Flow which also adds static typing to Javascript. Since they're both Facebook projects, it might be easier to use Flow than TypeScript when dealing with React.js.

Answer 8

For create-react-app projects just start off with npx create-react-app my-app --template typescript command.

For further reading: https://create-react-app.dev/docs/adding-typescript/

Answer 9

Now things seems have changed, from official Typescript docs

TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript.

And this on how start a project directly with Typescript