News for hackers. Stuff that matters.
Re:Using TypeScript with React by collyw on Thursday August 22, 2019 @08:59AM (#20767513)
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).

Re:Using TypeScript with React by amoerie on Thursday August 22, 2019 @09:40AM (#20767898)
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 by seanmcdirmid on Thursday August 22, 2019 @09:51AM (#20768041)
Typescript is really unlike C# or Java though, error cascading is a much much bigger issue in a structural type system than a nominal one, where the x method not implemented by class C will trigger whenever you try to call the x method (in a nominal type system you just get the error once, the typescript team could probably do a better job with this by investing some resources into the problem).
Re:Using TypeScript with React by verttii on Thursday August 22, 2019 @09:36AM (#20767865)
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 by collyw on Thursday August 22, 2019 @11:45AM (#20769365)
That looks like the type of thing I am looking for. I'll have a read through it.
Re:Using TypeScript with React by ht85 on Thursday August 22, 2019 @09:43AM (#20767942)
Could you give an example of the kind of problem you're talking about?
Re:Using TypeScript with React by collyw on Thursday August 22, 2019 @11:46AM (#20769376)
I am trying to remember the error that I got. I think it was complaining that the variable being passed to a function may be a null rather than the type that was specified.
Re:Using TypeScript with React by tuxracer on Thursday August 22, 2019 @01:25PM (#20770402)
Doesn't sound like a problem you get with typing, sounds like it was actually catching what could be a runtime error in production. If the variable is possibly null but the function you're passing it to expects it to not be null then typescript is pointing out what could be a runtime error if you don't explicitly handle that case (if (!foo) ...)
Re:Using TypeScript with React by SenHeng on Thursday August 22, 2019 @01:18PM (#20770330)
Sounds like an optional variable.

    function fn(arg?: SomeObject)
Or worst still, an or undefined, often found in class variables.

    this.foo: Thing | undefined = undefined;
Easy way to sidestep this error is > if (!arg) return;, but it’s really a code smell of a larger, design issue. As in, the function shouldn’t really be depending on an optional value.
Re:Using TypeScript with React by breatheoften on Thursday August 22, 2019 @01:10PM (#20770265)
I would highly recommend turning off no implicit any of you haven’t already — implicit any _will_ make it harder for you to figure out how to solve all the typing issues because it will make it significantly harder for you to understand the way type inference works by inspection. — E.g. if you are learning the typescript by looking at example code — a block of code which only types correctly because the compiler implicitly inferred the any type somewhere within can very easily lead you very far astray from understanding how the type system actually works ...

You might have to fix a bunch more errors but at least those are easy to fix (just add any explicitly to the type — or better yet, add the real type if it’s obvious) ...

Re:Using TypeScript with React by breatheoften on Thursday August 22, 2019 @04:10PM (#20771913)
Edit: I meant to say ... turning on no implicit any (prevent the inference engine from inferring the any type)
Re:Using TypeScript with React by davidjnelson on Thursday August 22, 2019 @12:28PM (#20769768)
Re:Using TypeScript with React by andy_ppp on Thursday August 22, 2019 @09:44AM (#20767959)
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!