Hacker News new | ask | show | jobs
by h0h0h0h0111 2496 days ago
I've been writing Typescript with React for quite a while now and these are my feelings so far:

- Typescript type system is pretty awesome, and allows the expression of some things really elegantly; in particular, string literal types are quite cool for component props that feel "htmly", union and intersection types are great for making reusable/generic components and Partial<T> is cool for making typesafe component states (https://www.typescriptlang.org/docs/handbook/advanced-types.... is a great resource)

- on a related note, the Typescript docs are very comprehensive

- ... but docs for anything React related to Typescript (types of components, etc) are harder to come by

- for the actual UI code there is some time wasted getting type signatures perfectly correct, particularly for React and HTML components, but I've built up a bank of helper functions in this regard.

- using `any` nearly always comes back to bite you as you trick yourself into feeling typesafe

- there is always a tradeoff between having perfectly exact types and not writing 139587123598 interfaces; expressing, for instance, mapStateToProps, mapDispatchToProps and mergeProps to compose into component props, or the former as a subtype the latter is pretty fiddly to get right and imo not worth the extra code

- create-react-app typescript support has gotten pretty good now, but it's nigh-impossible to step outside their boundaries. For me, some older features of typescript I wanted that protobufjs generated typescript used was just not usable and I had to work around that with great difficulty

- nearly all packages now have type definitions for them which is sick

- at the end of the day, you can still resort to vanilla JS where typescript really, really gets in the way

3 comments

> ... but docs for anything React related to Typescript (types of components, etc) are harder to come by

I just saw this linked today and didn't look it through entirely, but this React+Typescript cheat sheet looks very interesting for React-specific issues you might encounter with Typescript:

https://github.com/typescript-cheatsheets/react-typescript-c...

For example it explained an issue with the type inference for custom hooks that confused me somewhat earlier.

I really like Typescript so far, but you can easily encounter situations that are hard to figure out with only basic Typescript knowledge, especially when interacting with more complex libraries. This probably gets better with more Typescript experience, but it can be a serious speed bump as a Typescript beginner.

This is wonderful, and probably a better strategy than the one I've employed (e.g. hovering the onClick attribute of some component, seeing what type pops up in VSCode, copying it, and using that for my type, done!).
> - using `any` nearly always comes back to bite you as you trick yourself into feeling typesafe

This. I was so frustrated with this point that I created a tool for automatic tracking type coverage on PRs called TypeCov.

https://github.com/codechecks/typecov

You can avoid this dance all together by using `unknown` with more recent versions of TS. Think of `unknown` as a type-safe `any`.
> older features of typescript [...] protobufjs generated typescript

FWIW I have a used-in-production project that generates idiomatic TypeScript types for protobuf:

https://github.com/stephenh/ts-proto

As a disclaimer, it assumes you use Twirp for any RPC impls, merely b/c that is what we used, and so it needs a config flag to turn that off + also eventual support for canonical GRPC-style RPC.

And also the docs/install/setup all need polished, but feel free to file issues / PRs if you try it.