Hacker News Reader

Comment by renke1 | Hacker News Reader

React may not have "native" support for TypeScript, but in combination with TypeScript using React is so much more fun, if only for the fact that your props can actually be typed and checked at compile time.

View on HN

I wrote up how to get started with Typescript and React (and VS Code) - I need to update it for 2.0 but 99% of it is still correct: http://blog.tomduncalf.com/posts/setting-up-typescript-and-r...

The standard recommendation seems to be to use PropTypes. And also in general, to use Babel with React programs. Would be interested to hear experiences of using Typescript with React.

Using React, Redux, JSPM, TypeScript work great together in VS.NET, it compiles on save so you don't need to run any additional watchers and JSPM's bundle feature means you also don't need Babel. Since ES6 support is VS.NET is very weak, using TypeScript is the best way to use the latest ES6/TypeScript features today:

https://github.com/ServiceStackApps/typescript-redux

I converted wes bos' react tutorial series to typescript with much success and learned a lot along the way. https://www.github.com/ryanluker/typed-catch-of-the-day

In my opinion React support is progressing quickly but is not fully there yet (definitely more documentation is needed), so for the JSX part the pain is greater than the gain (especially given PropType checking already in React).

As an example, to see what I mean, try to figure out how to write a properly typed Higher Order Component function. Last time I looked at it, this had no direct mention in documentation and only workarounds on StackOverflow.

It seems a little strange but you can import the propTypes of the wrapped component (argument to the HOC) into the wrapper and incorporate them into your type checking there.

You can "pass through" props like so:

export var hocFunction: (arg1: any, arg2: any) => <ComponentT>(component: ComponentT) => ComponentT

If you want to add new props as a result of the HOC then see the react-redux .d.ts for a few examples: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/mast...

Reply on news.ycombinator.com