Add TypeScript To An Existing React Project
Learn how to add TypeScript to your existing React project in a few simple steps.
You'll often find folks talking about "TypeScript Performance". They might say "my codebase feels slow" and that "TypeScript is making my editor slow".
What do they mean?
TypeScript performance is a measure of how fast TypeScript can type-check your codebase. It's a measure of how quickly your editor can provide feedback on your code.
It's NOT a measure of how fast your code runs. TypeScript is a compile-time tool, not a runtime tool. Simply using TypeScript will not change the speed at which the emitted JavaScript runs - TypeScript doesn't do anything at runtime.
When TypeScript performance is poor, you will notice:
In other words, the things you do every day become slower and more painful.
TypeScript performance can be affected by several factors.
The first is scale. Simply put, the more code TypeScript needs to check at once, the slower it will run. However, scale is often less of a factor than you might think.
The second factor is the way you write your code. Using intersections instead of interfaces, utilizing project references, and employing return types judiciously are all useful ways to address TypeScript performance issues.
The TypeScript Performance Wiki provides a great list of strategies you can use to improve your TypeScript performance.
You can use some tsc
flags to measure your TypeScript performance.
Using tsc --diagnostics
or tsc --extendedDiagnostics
will provide you with information about how long it takes TypeScript to type-check your codebase.
By running tsc --generateTrace ./outDir
, you can generate a trace file that can be opened in Chrome's Trace Viewer to see where TypeScript is spending its time.
Aleksandra Sikora's excellent talk at BeJS is a great resource to begin exploring this topic.
Share this article with your friends
Learn how to add TypeScript to your existing React project in a few simple steps.
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
Big projects like Svelte and Drizzle are not abandoning TypeScript, despite some recent claims.
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.
Learn TypeScript in 2023 with this step-by-step guide. Understand the basics, essential types, unions, and narrowing techniques.