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

Read full post

Yongchang He • Aug 4 '22

Thank you for sharing this!

Jozef Behr • Aug 4 '22

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

Rense Bakker • Aug 3 '22

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

Omer Elbaz • Aug 3 '22

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.

JoelBonetR 🥇 • Aug 3 '22 • 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.

Omer Elbaz • Aug 3 '22

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 :)

JoelBonetR 🥇 • Aug 3 '22

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.