A Beginner’s Guide to Adding Custom Types Packages in TurboRepo

In your Turborepo(Monorepo) apps, you might want to keep typescript types or interfaces in a separate shared package, So you can use it in all the apps and other packages. You might find yourself wondering, “How do I add a custom types package in TurboRepo? 🧠” You’re not alone in this quest. Even I got the idea behind this post from this Stack Overflow Question and you can find my answer there as well. You can find my step-by-step guide below that will make this task feel as easy as pie 🥧.

The Journey Begins: Understanding Custom Packages

First, it’s important to understand that your custom package for types will be strikingly similar to a UI or any other package. The structure and the general concept remain the same, it’s just that the content differs.

1. Creating a New Home for Your Types

Let’s start creating a new directory for your types. This will be a folder named my-types inside the packages directory. This new folder is where all your custom types will reside, safe and sound.

2. Adding the Necessary Folders and Files

Next, create a src folder inside the my-types directory. This is where you’ll add your types files, for instance, my-type-a.ts and my-type-b.ts. Think of this as arranging the furniture in your new types home 🏠.

3. Connecting Everything Together

We need an 'index.ts' file in the root of our my-types package, acting as the entry point. Here you'll export everything like this export * from "./src", which will ensure all the types of files in src are available for use. This is equivalent to opening the doors and windows 🚪, making sure your types are accessible when needed.

4. Labeling Your Package

This step involves creating a package.json file. The purpose of this file is to hold various metadata relevant to the project. It’s like a label that tells anyone who might interact with your package what they can expect inside. Here you’ll add the main and types file source, similar to what’s shown in the below image:

5. Importing Your Custom Types ✔

Voila! You are almost there. Now you can import your custom types into your other packages and applications. All you need to do is add your new package my-types to the dependencies. This will allow you to import types or interfaces from it.

And just like that, you’ve added your custom types package in TurboRepo.