DEV Community

TypeScript - The Best Way to Use It with React

Omer Elbaz on August 03, 2022

Why TypeScript? I have another article that explains a lot about TypeScript, what it is and how and why you should use it. You're welcom...
Collapse
 
yongchanghe profile image
Yongchang He

Thank you for sharing this!

Collapse
 
behrjozef profile image
Jozef Behr

Thank You man for sharing this , just trying to learn.

Collapse
 
brense profile image
Rense Bakker

You have to add a tsconfig file to your existing project aswell

Collapse
 
omerwow profile image
Omer Elbaz

This is from the official Create React App docs:

You are not required to make a tsconfig.json file, one will be made for you. You are allowed to edit the generated TypeScript configuration.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

@brense pointed out "to your existing project" and he's right, if you want to add TS to a pre-existing project without TS, you'll need to create it.

By the way, Create React App installer is an oppinionated bunch of dependencies unraveled together from a single command, it's meant for learning purposes and not for serious projects in which you need to analyse which dependencies you do really need.
So most of the time IRL yes, you'll need to write the tsconfig file.

Thread Thread
 
omerwow profile image
Omer Elbaz

You're right, I added this to the article, thanks.

Also, this article is meant for beginners that want to get started and experiment with TypeScript and React, it does not claim to have anything production ready :)

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

It's worth mentioning though.
In tones of companies they ask explicitly to "create a react app without using create-react-app executable" in the tech interview process, and for good reasons;
Being able to tweak the initial setup means (to a certain point) that you understand the needs of the acceptance criteria (so don't overengineer) as well as the basics to maintain those pieces of software up to date and aligned to the project needs as well.

If you didn't yet, try to set up a React application with Parcel bundler instead webpack, maybe use mocha and/or other stuff for testing and so on. Do it step by step and full-forward.
If you use create-ract-app and then start deleting dependencies and adding new ones you'll probably end up with a mess and loosing a good amount of time and the knowledge gathered from that experience will be negligible.

Instead, add the dependencies one by one when they make sense and don't hesitate to use npm audit to check if there's any known bug or weakness on any used package as good practice.

Best regards.

Thread Thread
 
brense profile image
Rense Bakker

Yea I've moved away from webpack, I'm using vite now to build my React apps.

Thread Thread
 
brense profile image
Rense Bakker

CRA also comes with a nice collection of critical vulnerabilities (inside webpack dependencies) that havent really been fixed for almost half a year now...

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

Never tried Vite yet. For personal projects I always use Parcel for the "ease of use", rollup didn't catch it much and Webpack makes me feel like it's a whole new thing each version 😅

BTW I'm using Next JS for both sideprojects and work since a year ago and it comes with webpack so... Here we are. Glad I don't need to edit it, it works with the next.config instead 😂

Thread Thread
 
brense profile image
Rense Bakker

Yea webpack is ok if you dont have to touch it lol. It's really slow though... I think there's a Next JS alternative that uses vite... dev.to/cyco130/rakkas-nextjs-alter...

Collapse
 
brense profile image
Rense Bakker

If you use CRA yes, but if you add typescript to an existing React project, you need to add your own tsconfig.

Collapse
 
andrewbaisden profile image
Andrew Baisden

TypeScript is the natural progression for JavaScript developers.

Oh and just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
 
madza profile image
Madza

this was a great read

Collapse
 
ash_bergs profile image
Ash

Fantastic write up! I've really been coming around to TypeScript lately... but it definitely took a little time 😅

Collapse
 
mdmarufsarker profile image
Md. Maruf Sarker

Great article 👌

Collapse
 
vishalraj82 profile image
Vishal Raj

Great. Here is my guide to getting started with React and TypeScript - dev.to/vishalraj82/getting-started...