Incrementally Introducing TypeScript into Your React Project

How to build React TypeScript components for your React JS project

Why would you want to migrate from JS to TS? There can be an infinite amount of reasons but that’s not the point. The (hypothetical) fact is: you need to start using TypeScript and you need an easy way to introduce it into your project. Not only that but you have to do it without breaking your already working code and avoiding the rest of your team from hating you until the day you die.

Delivering new features independently, to gradually incorporate new technologies

There are many ways to make the transition from React JS to React TS — many of them are simpler than the one demonstrated here. The point of this article is not to compete with the alternatives but, instead, showcase a different methodology that might suit your specific case better. It’s also important to mention that the transition from JS to TS is just one example of this methodology (many other similar transitions can be implemented using the same methodology).

For this demonstration, I will be using a couple of tools that work extremely well together, to form a complete end-to-end solution:

1. Bit : An open-source tool for versioning and publishing individual components. Bit adds a semantic layer on top of your standard Git versioning. This layer enables the versioning of components as components (individual pieces of code with dependencies, etc) and not only as meaningless code. This is, essentially, what enables you to “harvest” components from any codebase, without having to manually configure almost anything.
2. Bit.dev : A component hub — a registry and a documentation site that compliments Bit by providing a place to publish and preview shared components.

The use case

For the purpose of this article, let’s go with the “hello world” of front-end development: a To-Do app.

Don’t worry, I’m not going to tell you how to write a To-Do app with React, I’m assuming you already know how to do that and let’s be honest, I’m r eally late to that party, so no.

Instead, I’m going to be using this app as an example, so feel free to fork it or at least open up the link to review the full code.

The components in the codebase are:

• TodoList : This is the main component, which is rendered in the form of a text input field and a simple button. Everything inside a form, which once submitted adds the text to a list maintained by the main app. The code for this component is very simple:

• TodoItems : A very basic list-component used to render the internal list of items added using the previous component. Each item can be clicked and once clicked, it’ll be removed from the list. The code is also, quite simple:

In both cases, the relevant methods are received as Props from the main App component. You can see the full code of that component over here .

The app is very basic, I give you that, but then again, the point here is that this could potentially be any React app that you might be working on and suddenly, you get the task of start migrating it to TypeScript, what do you do?

• Option #1: After wiping out your tears, you set out to the task of re-writing your entire source code.
• Option #2: You rename all your .js file into .ts and set up the proper steps on your build process and call it a day.
• Option #3: You actually decide to start progressively migrating the old code while writing all new code in TypeScript directly.

I want to explore option #3, essentially allowing you to have both pure JavaScript and TypeScripts components coexisting in the same app.

Enter TypeScript

So, for the sake of providing an example, let’s pretend you’re tasked to adding a toggle button to each item on your To-Do list. Once clicked, the background of the item needs to be toggled.

Nothing too fancy, but remember, the focus here is the process, not the actual code.

So instead of trying to add TypeScript to your already existing project setup and, potentially, break your build for a couple of days, we’ll create a brand new project directly using TypeScript:

Note that in order to use npx you only need a recent version of NPM, it’s been included as part of the installation process since version 5.2.0 .

Just like before, this will create a template project, although this time, using TypeScript as a base language.

And a simple toggle component that’s meant to be inserted into a different project, without bringing extra dependencies to the table. If you’re curious about doing just that, please check out: how to write reusable components .

Now, with that component written, we can use Bit (which is an open-source tool for versioning and publishing individual components) to individually extract and share that component so that we can import it later on from our JavaScript-based project.

// install Bit & initialize a workspace in the project's directory
$ yarn global add bit-bin
$ bit init --package-manager yarn// login (after creating an account and collection in bit.dev)
$ bit login// add all components
$ bit add src/components/Toggle.tsx // configure a compiler (to decouple the components from your env)
$ bit import bit.envs/compilers/react-typescript --compiler// tag & export
$ bit tag --all

With that, you’ve configured your project and you’ve set up the new Toggle component to be shared, but before you can actually do so, you need to log-in to Bit.dev (which is a component hub — a registry and a documentation site that compliments Bit by providing a place to publish and preview the components).

Once logged in, just create a new collection called “toggler”, make sure it’s public and then, from your terminal window, run the following command:

$ bit export user-name.toggler

With “user-name” being your actual username, this will export the component and you should be able to see it on Bit.dev . It should look somewhat similar to this:

Notice how by default, the platform creates a sample index.js file to test the component. That being said, the default content for it might not be ideal, however, the platform allows you to easily add extra code which can help others understand how to use your public component in their code.

For instance, here I updated my own sample file to explain how to use the Toggler component (just remember to hit the “Save” button after you’re done!):

Let’s now take a look at how to import this new component into your own, JS-based React app.

Importing external component

Bit takes care of compiling your TypeScript code into JavaScript thanks to the compiler we’ve added. This solves all your problems, all that’s left for you to do is to add the component into your project as a dependency.

I’ve been using Yarn for everything here, but you could potentially be using NPM just as easily, all you need to do is:

$ yarn add @bit/your-username.your-collection.your-component

In my case, that translates to:

$ yarn add @bit/deleteman.toggler.toggle

Notice you will not be able to install components if you're not logged in (remember the $ bit login part of our tutorial?). If you’d like to install components from Bit’s registry without logging in, you would need to configure the registry manually like so:

$ npm config set '@bit:registry' https://node.bit.dev

This will include your TypeScript (now compiled into JavaScript) component which you can the reference from your code as follows:

Notice line 2, that’s where I’m importing the external component which I’m using as part of the return statement. Nothing complicated, no need for extra configuration changes on your project or anything.

Congrats, you now have a working project using both, TypeScript and JavaScript, potentially without you even knowing about it!

As I’ve said before, you can read the full code on GitHub!

Conclusion

If you’re interested in migrating to TypeScript or if you’re interested in starting to dabble with it and see if it works for you, this way of gradually introducing the language into an existing project without the risk of breaking all the build process is perfect.

Give Bit a look and check out Bit.dev for more components written both, in JavaScript and TypeScript to understand how others do it as well!

Leave a comment below if you have another way of integrating TypeScript into your JS-based projects without affecting it and your entire team.

See you at the next one!