Friction in TypeScript setup experience
See original GitHub issueIn trying to update the TypeScript React Starter, I’m trying to leverage the newly supported support in CRA; however, running create-react-app
with the --typescript
flag seems to not do anything, and the process of adding TypeScript in general has a bit of friction.
As an example, I ran
npx create-react-app myapp --typescript
I expected at least the following:
- My files should have been
.ts
/.tsx
files. - A prescriptive
tsconfig.json
file should have been given to me out of the box. - My devDependencies should have included
typescript
,@types/react
, and@types/react-dom
.
Instead,
- The
--typescript
flag didn’t do anything special, and I had to rename a file likeApp.js
toApp.tsx
beforeyarn start
gave me atsconfig.json
. yarn start
told to runyarn add typescript
after the rename (which is misleading since it should be adevDependency
- soyarn add -D typescript
).- Running
yarn start
one more time, I was given a type-error because I was missing@types/react
and@types/react-dom
asdevDependencies
.
Then everything worked, but this feels extremely frictiony. And it’s also fairly confusing, because this flag doesn’t seem to give anything beyond what the standard CRA scaffolding gives. And other issues have pointed this out too:
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
User Experience Friction in Real Life Examples | Code & Pepper
User experience friction can kill a brilliant idea for an app. Learn what it is, when and why avoid it, and how to...
Read more >4 Easy Ways to Start Playing with TypeScript - Decembersoft Inc.
Undoubtedly, learning is easiest when there is no friction. Here are some easy ways to get your toes wet with TypeScript before you...
Read more >Documentation - Modules - TypeScript
Exporting a declaration ... Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export...
Read more >Using TypeScript with React - DigitalOcean
This tutorial covers how to use TypeScript with React functional or class-based components. In this post we also make use of the Parcel ......
Read more >Migrating millions of lines of code to TypeScript - Stripe
In late 2020, we formed a new horizontal JavaScript Infrastructure team: a group of engineers solely focused on elevating the experience of ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If you’re using
npx
, make sure you don’t havecreate-react-app
installed globally, as it will used the installed version i believe.npm uninstall -g create-react-app
@ianschmitz You were right, I globally uninstalled create-react-app (and typescript just to be safe) and it worked this time around! Thanks for the help!