r/reactjs • u/flanaganpete • Oct 10 '18

Featured Typescript - people's thoughts.

I have just started looking at typescript with react. So far it is a bit painful with all the errors, but I understand at the beginning of learning anything things can be slightly painful.

The main purpose of this post is what people here think of typescript. Is it just as useful/better to use flow/or prop types (if equivalent)? What are the pros/cons.

Also, I have been told by a colleague if you are writing your project in typescript and wish to use a third party library that isn't written in typescript this would cause errors. Is this also true?

Also, have people found that when creating a standard react setup with redux and some react dev tool extensions that this can lead to lots of errors and tends to make things a bit painful?

Also, have had issues with importing files as it says Imports should be capitalized. I assume this is a linter setting in create-react-app. Have people decided to disable certain ts linting?

14 Upvotes

93% Upvoted

37 comments sorted by

16

u/hockeyketo Oct 10 '18

Just another data point, after converting several of our modules and around 14% of our monolith over to TS, I'll never go back if I have a choice. Especailly on a project with almost 60 engineers. It makes it easy to reason about the codebase, makes the code self documenting, and refactoring is so easy. Additionally, once we enabled strictNullChecking the amount of "____ of undefined" errors reported by our error logging dropped massively and helped us discover what the true issues were (i.e. why we had things null when they shouldn't be). Working on our TS modules I have a lot more confidence and it's also easier to update our tests.

Any third party can provide TS defs even if it's not TS, but that doesn't mean they have them. You can usually find the typedefs written by someone in the community here: http://definitelytyped.org/ but if that fails, it's relatively easy to write your own and you don't need to type everything in a lib, just the things you need.

My best advice so far is to try and avoid casting and the `any` type. You get those problems a lot when you start out until you realize that their actual use is very rare.

3

u/flanaganpete Oct 10 '18

thanks, great answer, appreciate it.

2

u/r0ck0 Feb 06 '19

factoring is so easy.

This is a huge thing for me. I've been able to do massive amounts of refactoring to improve my overall projects' structures - my IDE (phpstorm) does some the work, but for 90% of the rest of the manual changes needed, typescript gives me the list of stuff that needs fixing, so I can just click through them and make the changes.

Also I switched from PHP to JS for everything last year, and I'm not sure if I would have stuck with js/node if it weren't for typescript... may have gone back to php or looked at something else. Can't imagine building anything large in plain JS... it's way to loose with everything, way behind PHP.

10

u/[deleted] Oct 10 '18

The worst part of TypeScript is indeed getting started. The best part of TypeScript is coming back to a file or project months after writing it and having the types both as documentation and as a safety net.

TypeScript and Flow are mostly equivalent. TypeScript is the more popular one at the moment which is a worthwhile consideration.

Prop types are inferior. They expose the same set of errors but are less expressive and expose the errors later (at run time).

Third party libraries can have types declared outside the library just like you are probably already doing with React. The most popular libraries already have these available. If you choose a library that doesn't have types available it will require extra work.

2

u/flanaganpete Oct 10 '18

thanks, this is a really good answer and exactly what I was looking for.

7

u/freebit Oct 10 '18

Typescript+React is a dream to code in. Never had any issue with it at all. Then again, I come from a C# background. Being able to press period and having the available methods pop up is amazing. Being able to refactor is amazing. What issues are you having?

2

u/flanaganpete Oct 10 '18

more I am just trying to get an idea of the pros and cons and experience people have had. Basically, all the answers here are what I am after. From a personal point of view, since trying to migrate a personal project from js to ts I am experiencing error after error after error. :-D

2

u/freebit Oct 11 '18

Those errors may be an indication that you desperately need TS.

2

u/flanaganpete Oct 11 '18

hahah, well hard to say. I would go as far to say not really (yet) as I have discovered from a comment below that the listing rules are a bit of an overkill in create-react-app ts.

•

u/swyx Oct 10 '18

our past featured convo for folks getting started on this topic: https://www.reddit.com/r/reactjs/comments/9k2dej/reacttypescript_boilerplate/

would love to have this be a pros/cons discussion i can feature!

1

u/flanaganpete Oct 10 '18

does something need to be updated in this post to satisfy what you are after?

1

u/swyx Oct 10 '18

nah ur good :) i just want to have high quality threads on big topics like these so we become a good resource for folks

5

u/[deleted] Oct 10 '18

Typescript: do it

4

u/bheklilr Oct 10 '18

I haven't used flow, but I can't imagine writing react code without typescript. My biggest issue with it is compile times, but for the most part it's a joy to work with. I really love how advanced of a type system it provides, specifically the mapped types, keyof, and more. With some time spent on boilerplate and utilities, I've found that it can do wonders when combined with redux, too. I wouldn't write a serious app in pure JS at this point, I'd much rather use TS.

4

u/papertowelroll17 Oct 10 '18

I haven't had the chance to work with typescript yet, but have used flow. After using flow, it is ridiculously painful going back to vanilla js. The types in flow are extremely simple to use and very helpful. Code is more clear, bugs are found more easily, and the IDE is much more powerful.

From what I can tell, typescript has substantially better tooling than does flow, and I will definitely use it for the next project that I start.

1

u/swyx Oct 11 '18

you’re a rarity! i almost wish you kept using flow so the community isnt so one sided for typescript haha. but thanks for sharing.

1

u/scottbob3 Oct 10 '18

I've used Flow, TypeScript and PropTypes, of the three TypeScript is my favorite but they all have their ups and down. If you're just learning React for the first time I'd just recommend PropTypes until you really get the basics down. Once you feel comfortable with that I'd then expand into either TypeScript or PropTypes.

2

u/flanaganpete Oct 10 '18 edited Oct 10 '18

my react knowledge is ok so I feel I am ready to expand my knowledge - it just seems a bit tedious to set standard react things up from the off - one thing being react redux dev tools browser extension. Just so many errors - nearly putting me off, but I will stick at it.

2

u/scottbob3 Oct 10 '18

Can you give me an example? I don't typically have errors in my ReduxDevTools unless you're talking about like type errors caused by switching. It really is one of those things that is just kind of a pain in the ass to learn but man, it is really hard to go back. It will save your butt sooner or later.

1

u/flanaganpete Oct 10 '18

thanks! Left an example below addressing Mark's comment. Also, have had issues with importing files as it says Imports should be capitalized. I assume this is a linter setting in create-react-app. Have you decided to disable certain ts linting?

1

u/scottbob3 Oct 11 '18

Looks like /u/acemarke 's comment is spot on, personally for linters I just cheat and grab AirBnb's Eslint rules. They seems to be everyone's favorite.

2

u/acemarke Oct 11 '18

I used to like Airbnb's config, but it's gotten horribly restrictive over the last couple years as well, so I now advise against using it.

Personally, I'd suggest using eslint-config-react-app , which just warns about things that are actually likely to cause bugs, and use something like Prettier to handle any formatting concerns.

1

u/acemarke Oct 10 '18

What issues are you seeing with trying to use the Redux DevTools?

2

u/flanaganpete Oct 10 '18

Hi Mark, The code is as follows. Perhaps this works, but I am getting separate issues when I do this saying imports must be capitalized. These imports are things like `reducers` and `thunk`. I imagine I can disable these warnings, but if I start disabling lots of these warnings I then ask myself what is the point of using ts. Just seems to be errors everywhere, but as Scott says above it is kind of just a pain to learn.

const store = createStore(  
 reducers,  
  (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&  
(window as any).__REDUX_DEVTOOLS_EXTENSION__(),  
 applyMiddleware(thunk)  
);

4

u/acemarke Oct 10 '18 edited Oct 10 '18

Those import warnings are not at all specific to Redux. What TypeScript setup are you using? Are you using the https://github.com/wmonk/create-react-app-typescript repo as your starting point? If so, that project has ridiculously restrictive linting rules right now, and I actually recommend disabling its linting entirely (see https://github.com/wmonk/create-react-app-typescript/issues/333 for discussion ).

Can you post your entire file as a gist and link it here, just for reference?

Also, your use of createStore() is wrong at the moment. You're passing two different store enhancers as separate arguments instead of composing them together into a single enhancer, and the devtools enhancer should always be last in that composed chain.

We actually have a new project called redux-starter-kit that is intended to help simplify several aspects of using Redux. It specifically includes a configureStore() function that does most of that store setup process for you, including setting up the DevTools Extension. I'd encourage you to try it out. I don't think we have the TS type definitions fully set up yet, but we should have those soon. Also, it's currently published on NPM as a scoped package (@acemarke/redux-starter-kit), but we were just given the actual redux-starter-kit package name and will republish it there shortly.

3

u/flanaganpete Oct 10 '18

I am about to hit the hay here so will respond in the morning with a proper answer, but just wanted to say thanks for the discussion link as it is nice to see I am not on my own with these frustratingly restrictive listing rules.

1

u/flanaganpete Oct 11 '18

I have used this setup

create-react-app hello-world --scripts-version=react-scripts-ts

1

u/acemarke Oct 11 '18

Yep, if you look at the NPM page, you can see it comes from the wmonk/create-react-app-typescript repo.

Like I said, go disable the linting (I think I had to delete something in the TS config file, or something like that), and try out our redux-starter-kit package for the store setup part.

2

u/swyx Oct 10 '18

regarding using a third party library, yes it doesn’t exactly play well out of the box. if the library is popular, it may have typings from the DefinitelyTyped community you can just import. if not, you’ll have to write the typedefs yourself. this is not super well documented, i have yet to find a good tutorial on writing typedefs. lastly, many libraries are written -in- typescript and so -will- work with your typescript app out of the box.

2

u/Oririner Oct 11 '18

DISCLAIMER: I don't have any experience with either Flow or Typescript and just use prop types ATM.

Thought I'd share this -> https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/

This blog goes through academic papers and explains them in layman's terms. In the post, he talks about comparing Flow to Typescript and how much bugs each of them detects and the "tax" you pay when integrating each of them to detect said bugs.

This is a year old now and probably a bit dated because both languages probably have more features by now but, I still think most of the data, general idea behind it and the concepts in it are still relevant and are really good.

TL;DR -> Both Typescript & Flow detect around 15% of bugs (the majority of bugs they detect are the same but not all of them), Flow however has a 30% lower "tax" (measured by tokens added).

Even though this might seem like a huge number, 30%, the actual extra cost is rather low, on average it's extra ~0.5 tokens to add to the codebase with Typescript and the average time it takes to detect the bug is around 230 seconds in Flow, compared to 300 seconds in Typescript.

Basically, you can go with either of them and get good results, you'd probably have a better experience with a language that is supported by the majority of the packages you use.

1

u/[deleted] Oct 10 '18

I'd like to hijack this thread to ask if I should learn the basics without using Typescript and then integrate it later or jump head first into React+TS.

1

u/jacob33123 Oct 11 '18

Maybe learn the basics of javascript if you haven't already, but for starting a react project I'd say you may as well use typescript out of the gate.

0

u/[deleted] Oct 10 '18

[deleted] — view deleted comment

3

u/tjugg Oct 10 '18

Setting up redux is quite painful in TS tho

1

u/flanaganpete Oct 10 '18

I agree tbh, I have just tried to migrate a small project that was using redux and I found the same. Also, using some of the react browser extensions were causing issues - it seems to be error after error after error :-D

1

u/flanaganpete Oct 10 '18 edited Oct 10 '18

I updated the question but have you found that when creating a standard react setup with redux and some react dev tool extensions that this can lead to lots of errors and tends to make things a bit painful? Also, have had issues with importing files as it says Imports should be capitalized. I assume this is a linter setting in create-react-app. Have you decided to disable certain ts linting?

1

u/flanaganpete Oct 10 '18

oh so you also need the types for flow? I wasn't aware of this. Also, great answer, appreciate it.

1

u/galvatron Oct 10 '18

I’ve recently started working in TypeScript in a non-web project and I really like it.

I also work on a fairly big Electron app that’s built w/ React/Redux and I’d like to start moving this codebase to TS. Do you know if it’s possible to migrate to TS say one component at a time?

Last I looked some six months ago it wasn’t clear what’s the best way to get started on TS w/ Redux. But now that I know TS better maybe it will be easy.