Live data from Hacker News

Using TypeScript with React

simonknott.de

21–30 of 195 posts

Re: Using TypeScript with React

#21
For 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.

Re: Using TypeScript with React

#22
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 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

Re: Using TypeScript with React

#23

For 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 your machine)

That will make a 'typescript' React app run on your machine. Obviously App.tsx isn't actually doing any TypeScript stuff, but if you add some it will work.

Re: Using TypeScript with React

#24
post #3

During my internship we've built a large prototype using React+Typescript, and here are some of my key take aways from it: - Quite often when using unreleased APIs, you turn to using "any" all over the place. - Development time is slower than writing in regular JS/React. This started to become a major issue due to the nature of our project being a prototype (fast iterations on ideas and features). - Lots of frustrati…

I’d recommend using ‘unknown’ over ‘any’, it’s truer to the code you’d probably end up writing if it was vanilla JS; fairly defensive stuff.

On top of that don’t be hesitant to define ad hoc interfaces on your side of things; ultimately ‘any’ communicates zero information and provides zero defence.

The more I start to use other techniques the more I feel that ‘any’ really should be the last escape hatch deployed.

Re: Using TypeScript with React

#25

React 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.

I don't understand. How would you strongly type every function and state variable in react without typescript?

Re: Using TypeScript with React

#27
post #23

For 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…

Even simpler, see https://create-react-app.dev/docs/adding-typescript

    npx create-react-app my-app --typescript

Re: Using TypeScript with React

#28
post #8

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.

Looked at Elm and it looks quite interesting. however concerns for going to it - Skill transfer. If I learn react, I can use my JavaScript skill to understand how everything works under the hood. If I learn Typescript with React, knowing react, I can focus on learning new language feature while not learning at the same time how to build the application. With Elm, I have to learn the language and the framework, all at…

The job market is a chicken and egg type problem. Management would not allow Elm based projects as there are no othe Em programmers on staff. We cant ask for Elm programmig experience in resumes as we dont have any Elm based projects.

I wonder how other languages,like Scala, managed to get traction in the enterprise whereas Elm has not even though it can solve real issues that we face with Javascript development.

Re: Using TypeScript with React

#29
post #8

Earlier quoted context omitted.

Looked at Elm and it looks quite interesting. however concerns for going to it - Skill transfer. If I learn react, I can use my JavaScript skill to understand how everything works under the hood. If I learn Typescript with React, knowing react, I can focus on learning new language feature while not learning at the same time how to build the application. With Elm, I have to learn the language and the framework, all at…

The job market is a chicken and egg type problem. Management would not allow Elm based projects as there are no othe Em programmers on staff. We cant ask for Elm programmig experience in resumes as we dont have any Elm based projects. I wonder how other languages,like Scala, managed to get traction in the enterprise whereas Elm has not even though it can solve real issues that we face with Javascript development.

I agree it is definitely a chicken and egg type problem (which doesn't negate the fact that it is a problem)

I don't know for Scala, but in general Marketing and money thrown at hackathon and meetups can get things moving in that regard. However I believe Elm doesn't do much of that.

Re: Using TypeScript with React

#30

For 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.

[deleted]
Post reply on HN