If you are going to learn a new programming language for web UI, why not go for Elm ? You get so much more than just static types with Elm.
Using TypeScript with React
41–50 of 195 posts
Re: Using TypeScript with React
#42I'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…
Re: Using TypeScript with React
#43If you are going to learn a new programming language for web UI, why not go for Elm ? You get so much more than just static types with Elm.
Re: Using TypeScript with React
#44React is already typed with props. I see no added use for TypeScript. Yet another list of packages makes maintaining very hard and inconsistent (as types are declared in variant ways). Explicit (and simple) functions as React (e.g. hooks) provides won't need strongly typed code, less readability in my opinion. If you're building a library / sdk, than Typescript comes in place and can make life easier for devs.
The only advantage for using them over TypeScript or Flow that I've seen is when consuming third party React components.
Otherwise the guarantees, feedback loop and terseness of static types are superior to PropTypes.
Re: Using TypeScript with React
#45I'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…
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 the same time.
I'm curious btw how long TS will live, especially when you realize that within a few years we can write in virtually any language through WebAssembly. Good luck with it anyways.
Re: Using TypeScript with React
#46Typescript 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…
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
#47- 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 the usage going to persist (example, using a library without @type), then you treat it as JS and have appropriate amount of validation around the occurrence.
- Usage of "?" and "!" covers more scopes with less lines of code. For hobby/one-man project, I found their usages no-brainer, however I'm nervous when it comes working in a team of various experience level.
- I've had real headache typing API responses. On one hand, you have absolute no control of others' code quality that you might as well have "number | string | null | undefined" for all parameters. But doing that almost defeats the purpose of typing it, so I'll need to use my educated guesses and judge reliability of each known parameters in responses.
- TypeScript version of 'create-react-app' projects builds slower than its JavaScript counterpart without ejecting. It took 2~6 seconds per build while IIRC, it was - JSDoc is still relevant in TS code. It is great to document event emitters, exceptions etc.
- tslint and prettier are must in my projects in order to retain sanity for unnecessary discussions around coding style.
Re: Using TypeScript with React
#48If you are going to learn a new programming language for web UI, why not go for Elm ? You get so much more than just static types with Elm.
Before trying Elm I'd never used a purely functional language. It's definitely a different way of thinking and I'm glad I took the time to wrap my head around it.
Re: Using TypeScript with React
#49I'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…
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.
Re: Using TypeScript with React
#50For typescript to be very useful to indispensable the tooling needs to improve. If there was a checkbox on VSC that said “use typescript” for a project and I had to do nothing else for it to work then sure, I’d use it. For a single dev working on a fairly simple React + Redux app it’ll slow you down like no tomorrow.
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…
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.