Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Using TypeScript with React

simonknott.de

Post reply on HN
Print view View original

51–60 of 195 posts

Re: Using TypeScript with React

#51

Post by jjakque »

whatever_dude wrote: post #49
jjakque wrote: post #47

I've done 2 commercial Typescript + React projects so far (along with few side projects using what I knew that time + what I want to try). My experience been: - Discourage 'any' but not been afraid of using it when must. I think it as the 'technical debt spelled out': when you want to put down an 'any' and get on with what you're doing, by all mean, but remember its existence and make sure the team is well aware. If…

> tslint and prettier are must in my projects You're probably tired of hearing this by now, but ESLint is the "official" way to go with TS from this point on. It has better integration with Prettier too, since Prettier formatting differences shows as errors/warnings.. and you can share JS/TS rules if needed.

Thanks for pointing this out.

It's simply a matter of time of phasing into preferable setup, consider the current setup is 'not yet broken'.

Re: Using TypeScript with React

#52

Post by namelosw »

React is more functional favored. It's very recommended for functional languages having static type systems, at least for language like JavaScript heavily relies on object literal.

The problem is, dynamic OOP languages like Ruby and Python are Okay to work with, since you know the class of an object you know a lot of things (schema, behavior, etc).

But for JavaScript and React, mutable classes are not quite useful since they mutate themselves, and could stop the app from re-rendering. it's more likely people are using object literals, which can hardly go far.

With TypeScript's structural and gradual type system, it's flexible and easy enough to type object literals with the union and intersection types, without forcing people to use classes.

Re: Using TypeScript with React

#53

Post by pure »

siempreb wrote: post #45
bauerd wrote: post #36

I'm currently trying to revive a 2yrs old codebase written with TypeScript/React/Redux. I made the capital error of not checking in node_modules apparently or pinning versions (ie using yarn or npm shrinkwrap), as I now get tons and tons of type errors from dependencies on build. Problem seems to be that all the @types packages are somehow out of sync/broken/hell I don't know. I also don't have access to CI logs anym…

> now throws ~30 errors on build Yep, it's a beautiful technology, total type safe heaven. Two basic basic rules if you want to work with TS: 1: apply the 'any' type 2: tweak TSC config so it won't complain anymore All companies I worked for in the past few years that use TS did this to keep TS 'out of the way'. And with that you completely annihilate the main benefit of using TS! I think it's hilarious and sad at th…

This seems like an unrelated potshot at TS. It sounds like the person you're replying to didn't have a yarn.lock or package-lock.json, so 2 years later, they're pulling in different versions of every dependency. Of course things are going to break.

Re: Using TypeScript with React

#54

Post by verttii »

collyw wrote: post #46
jillesvangurp wrote: post #35

Typescript is a lot easier to deal with if you stop treating it as optional and do it from day 1. Avoid using the any type and things fall in to place. If it's tedious, you're probably doing something wrong or sub-optimal. Or you're just dealing with a bit of hairy old javascript that probably needs a bit of refactoring in any case. IMHO we're reaching the point where typescript (or similar languages) should be used…

I am a backed developer 90% of the time, but I currently have to work on a Typescript / React application that an agency did for us - cleaning up the bugs. Is there a good resource to demonstrate how to get around the problems you get with typing? At the moment I am using @ts-ignore to get things done. (Saying "you are probably doing it wrong" isn't really very helpful).

https://github.com/piotrwitek/react-redux-typescript-guide

This is a good list of how to use common React patterns in Typescript.

Re: Using TypeScript with React

#55

Post by amoerie »

collyw wrote: post #46
jillesvangurp wrote: post #35

Typescript is a lot easier to deal with if you stop treating it as optional and do it from day 1. Avoid using the any type and things fall in to place. If it's tedious, you're probably doing something wrong or sub-optimal. Or you're just dealing with a bit of hairy old javascript that probably needs a bit of refactoring in any case. IMHO we're reaching the point where typescript (or similar languages) should be used…

I am a backed developer 90% of the time, but I currently have to work on a Typescript / React application that an agency did for us - cleaning up the bugs. Is there a good resource to demonstrate how to get around the problems you get with typing? At the moment I am using @ts-ignore to get things done. (Saying "you are probably doing it wrong" isn't really very helpful).

Generally, try the following steps:

- turn off strict flags, turn them on again after everything compiles in non strict mode - ensure you have the correct typings for the libraries you're using. Some libraries include them, others require a @typings/xyz dependency. (E.g. React and ReactDOM) - try to hunt down the root errors. Much like C# or Java, one error can lead to hundreds of compilation errors down the line, but fixing the first root error can also make all of them go away in one fell swoop. - try to keep things simple and non dynamic. Typescript is very flexible and powerful, but think twice before you use crazy constructs. - enable emitOnError. It will allow you to test while you refactor, even though typescript complains. - ask yourself: if it works and typescript does not compile, is it because typescript can't understand or is it because typescript is seeing possible issues you've not taken into account? - don't think of typescript as something to get around of. Think of it as a helping hand that will guide you in your daily work and prevent a whole swath of runtime errors, but it needs to be fed with information about your data structures and libraries to work properly.

Re: Using TypeScript with React

#56

Post by onion2k »

resurge wrote: post #50
onion2k wrote: post #23

Earlier quoted context omitted.

What you're asking for mostly exists. You don't even need a checkbox. TypeScript support has been included with create-react-app since v2.1.0, with all the features enabled. VS Code ships with syntax highlighting and command completion for TS. If you want to try it use; npx create-react-app tsx-test yarn add typescript @types/react mv ./src/App.js ./src/App.tsx yarn start (WARNING: npx runs stuff from the internet on…

Note that they said "React + Redux". And that combo indeed takes a lot more time to get set up and understand the first time. I used this lib to get it to work: https://www.npmjs.com/package/typesafe-actions I wouldn't even know how to get it to work with just the regular react & redux types.

typesafe-actions looks useful but you don't strictly need it. You can use redux with TS just by adding @types/react-redux. https://redux.js.org/recipes/usage-with-typescript#usage-wit...

Re: Using TypeScript with React

#57

Post by ht85 »

collyw wrote: post #46
jillesvangurp wrote: post #35

Typescript is a lot easier to deal with if you stop treating it as optional and do it from day 1. Avoid using the any type and things fall in to place. If it's tedious, you're probably doing something wrong or sub-optimal. Or you're just dealing with a bit of hairy old javascript that probably needs a bit of refactoring in any case. IMHO we're reaching the point where typescript (or similar languages) should be used…

I am a backed developer 90% of the time, but I currently have to work on a Typescript / React application that an agency did for us - cleaning up the bugs. Is there a good resource to demonstrate how to get around the problems you get with typing? At the moment I am using @ts-ignore to get things done. (Saying "you are probably doing it wrong" isn't really very helpful).

Could you give an example of the kind of problem you're talking about?

Re: Using TypeScript with React

#58

Post by andy_ppp »

collyw wrote: post #46
jillesvangurp wrote: post #35

Typescript is a lot easier to deal with if you stop treating it as optional and do it from day 1. Avoid using the any type and things fall in to place. If it's tedious, you're probably doing something wrong or sub-optimal. Or you're just dealing with a bit of hairy old javascript that probably needs a bit of refactoring in any case. IMHO we're reaching the point where typescript (or similar languages) should be used…

I am a backed developer 90% of the time, but I currently have to work on a Typescript / React application that an agency did for us - cleaning up the bugs. Is there a good resource to demonstrate how to get around the problems you get with typing? At the moment I am using @ts-ignore to get things done. (Saying "you are probably doing it wrong" isn't really very helpful).

Eventually if you force yourself to figure things out at every painful step you'll get there. We still have quite a few ignores but the type safety is actually so so nice; you almost know your code will work 90% of the time if the red squiggly lines disappear.

I'm really going to struggle if I have to go back to normal JS now which says something!

Re: Using TypeScript with React

#59

Post by verttii »

Typescript certainly eliminates a class of errors from a JS codebase and can also make development more productive.

My issues with it are that it's just an extremely verbose language. Just like all Microsoft languages. All the while lacking advanced type system features like algebraic data types, pattern matching etc.

Re: Using TypeScript with React

#60

Post by _bxg1 »

bauerd wrote: post #36

I'm currently trying to revive a 2yrs old codebase written with TypeScript/React/Redux. I made the capital error of not checking in node_modules apparently or pinning versions (ie using yarn or npm shrinkwrap), as I now get tons and tons of type errors from dependencies on build. Problem seems to be that all the @types packages are somehow out of sync/broken/hell I don't know. I also don't have access to CI logs anym…

Dependency types are definitely one of TypeScript's biggest weaknesses.

That said, it can be seen as encouragement to minimize your dependencies. The big ones like React will be kept up to date, so if you have lots of breakage you're probably using lots of smaller dependencies.

As for mitigation strategies, you can always just use "any" as a temporary stopgap, or you can even write your own type files for third part libraries depending on how big of a footprint those have in your own code.

Post reply on HN