Add TypeScript To An Existing React Project
Learn how to add TypeScript to your existing React project in a few simple steps.
A recent video by Fireship, entitled "Big projects are ditching TypeScript... why?" is getting a lot of traction.
So much so, that I'm now regularly getting questions like this:
What do you think about the mass abandonment of TypeScript by big projects?
I think that Fireship's video contains a number of inaccuracies, and I'd like to address them here.
The video was released after DHH's announcement that Turbo 8 is dropping TypeScript.
Fireship's video got this absolutely right. Turbo 8 has fully dropped TypeScript - from their source code and the compiled output.
DHH reasoned that the source code was now easier to read, and that contributors weren't consulted because "this is one of those debates where arguments aren't likely to move anyone's fundamental position". Predictably, the PR to remove TypeScript from Turbo was not popular with both Turbo's users and contributors.
Fireship's video made it seem as if users of Turbo will still get a decent experience with TypeScript. This is not true. If Turbo chooses not to ship type definitions (which are automatically created from TS files) you'll no longer get autocomplete and type safety when importing it into TypeScript files. Rich Harris, creator of Svelte, memorably called this behavior "user-hostile dickwaddery".
Turbo could still choose to manually author these type definitions to help their users. But this would mean manually creating .d.ts
files and shipping them. Given their stance, this seems unlikely.
The video also mentions that Svelte "no longer uses TypeScript". Then, it goes on to clarify that Svelte is "getting most of the benefits of TypeScript by using JSDoc".
He's right! Svelte is still using TypeScript - just not in the way that most projects do.
To quote Rich Harris again, they are "just moving type declarations from .ts files to .js files with JSDoc annotations". This way, Svelte is able to get the benefits of TypeScript without having to use .ts
files. This means that "cmd-clicking on functions you import from Svelte [...] will take you to the actual source".
Svelte still has a tsconfig.json
file. It still runs the TypeScript type checker.
The only thing they've changed is the way they provide type information to the TypeScript compiler. By all reasonable definitions, they're still using TypeScript.
So, Fireship got this mostly right. But using this example in a video entitled "Big projects are ditching TypeScript" is misleading.
This is perhaps the most misleading statement in the video. Drizzle, a popular TypeScript ORM, has not dropped TypeScript.
In the wake of DHH's announcement, Drizzle tweeted that "we're removing TypeScript from Drizzle". This was a reference, in jest, to DHH's post.
Unfortunately, Fireship took this at face value, and included it in his video as an example of a "big project" dropping TypeScript.
Are big projects ditching TypeScript?
Turbo dropped TypeScript from their source code and compiled output. Svelte changed from .ts
files to .js
files, but is still using TypeScript. Drizzle were joking.
So, no. Big projects are not ditching TypeScript.
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.
Learn different ways to pass a component as a prop in React: passing JSX, using React.ComponentType, and using React.ElementType.
Learn about TypeScript performance and how it affects code type-checking speed, autocomplete, and build times in your editor.
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.