4 ms·

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

by renke1 10y ago

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.

Brakenshire 10y ago
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.
- mythz 10y ago
  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 https://github.com/ServiceStackApps/typescript-redux
- ryanluker 10y ago
  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 https://www.github.com/ryanluker/typed-catch-of-the-day
- tga 10y ago
  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.
  - amk_ 10y ago
    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.
  - tomduncalf 10y ago
    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/master/react-redux/react-redux.d.ts#L51 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/mast...
tomduncalf 10y ago
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-react/ http://blog.tomduncalf.com/posts/setting-up-typescript-and-r...

by renke1 10y ago

Brakenshire 10y ago

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.

mythz 10y ago
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 https://github.com/ServiceStackApps/typescript-redux
ryanluker 10y ago
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 https://www.github.com/ryanluker/typed-catch-of-the-day
tga 10y ago
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.
- amk_ 10y ago
  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.
- tomduncalf 10y ago
  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/master/react-redux/react-redux.d.ts#L51 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/mast...

tomduncalf 10y ago

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-react/ http://blog.tomduncalf.com/posts/setting-up-typescript-and-r...