What is the process for transitioning global reusable types to package types within turborepo?

When creating an app within the apps folder, a global.d.ts file is required with specific types defined like this:

interface Window{
    analytics: any;
}

This file should be designed to be reusable and placed in the packages/types directory for easy access across all apps.

After moving the Window type to packages/types, I encountered issues when trying to import these global types into my apps.

Answer №1

Properly setting this up requires following a few steps:

  1. To start, create a shared-types package within the packages directory of your monorepo
  2. Within the package.json file of the shared-types package, specify where the types are located:
{
    "name": "shared-types",
    "version": "1.0.0",
    "main": "./index.js",
    "types": "./index.ts",
    "dependencies": {
        "typescript": "latest"
      }
}
  1. Next, add the shared-types dependency to any applications that require it
 "dependencies": {
    ...
    "shared-types": "*"
  },
  1. Finally, import the necessary types into your project
import { MyType } from "shared-types";

For more detailed information, refer to the Sharing Code and Internal Packages sections in the Turborepo documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error Message: ApolloError - Server issue: Unable to complete request - Status code 401 received

I'm encountering an issue when trying to start my NextJS project. It works fine on my computer using the command "npm run dev", but I run into problems when deploying it on Vercel or cloning the git repository on another computer at school. I suspect ...

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

I have to make sure not to input any letters on my digipas device

There is a slight issue I am facing. Whenever I input a new transfer of 269 euros with the bank account number BE072750044-35066, a confirmation code is required. The code to be entered is 350269. https://i.stack.imgur.com/YVkPc.png The digits 350 corres ...

Getting started with the NextJs API can be easy with the right approach

I recently started using Next.js with MongoDB and I'm wondering about the best way to structure my API route files. My application performs basic operations like adding, updating, and deleting documents in a MongoDB collection. Currently, I have sepa ...

Updating a URL for all users using React/Next.js and Firebase: a guide to refreshing the page

I am currently developing a Next.js application with a Firebase backend and have encountered an issue. In my setup, users can create sessions that others can join, but only the creator of the session can "start" it, triggering a state change. I need all us ...

Angular 13: How to Handle an Empty FormData Object When Uploading Multiple Images

I attempted to upload multiple images using "angular 13", but I'm unable to retrieve the uploaded file in the payload. The formData appears empty in the console. Any suggestions on how to resolve this issue? Here is the HTML code: <form [formGro ...

Cosmic - Ways to incorporate personalized validation strategies into the `getConfigValue()` function?

Why is the getConfigValue() function not retrieving validation values from custom Strategies? For example: @Injectable() export class CustomStrategy extends NbPasswordAuthStrategy { protected defaultOptions: CustomStrategyOptions = CustomStrategyOptio ...

Error in Angular 4: Unexpected 'undefined' provided instead of a stream

I encountered an issue while attempting to make a HTTP Post request. The error message I received is as follows: auth.service.ts?c694:156 Something went wrong requesting a new password, error message: You provided 'undefined' where a stream ...

Begin a Next.js project in a live environment using a designated port number

I’ve encountered an issue with my two nextjs projects. One is running smoothly on the default port 3000, but after upgrading the server and restarting all pm2, I faced a problem with the second project. In an attempt to assign a specific port in the pa ...

Angular Error: Trying to access a property on an undefined variable

I'm currently having an issue with assigning data from an API to my Angular component file. Whenever I try to assign the data to my object variable, I receive an error stating: "cannot set property of undefined." Below is the relevant code snippet: C ...

Using Typescript for-loop to extract information from a JSON array

I'm currently developing a project in Angular 8 that involves utilizing an API with a JSON Array. Here is a snippet of the data: "success":true, "data":{ "summary":{ "total":606, "confirmedCasesIndian":563, "con ...

Install a particular version of a dependency within another dependency using npm

This particular project utilizes [email protected] and [email protected]. package.json "dependencies": { "next": "^13", "next-drupal": "^1.6.0", } The version 13 of "next" dependency has a security is ...

What is the Angular2 version of angular.equals?

Currently, I am in process of upgrading an Angular 1 project to Angular 2. In the old project, I used angular.equals for comparing objects like this: angular.equals($ctrl.obj1, $ctrl.newObj);. I tried looking online for a similar method in Angular 2 but ...

Top method for setting a cookie in the App router server component using NextJS

I am faced with a task that involves updating a flag in the database and creating a cookie with a 5-minute expiry time whenever a page is loaded. Furthermore, upon subsequent page loads, I need to check if the cookie has expired, update the flag, and gener ...

What are the steps to successfully launch a Node.js / Express application with typescript on heroku?

I attempted to deploy my node.js / express server app on Heroku but encountered some issues. I followed the steps outlined in a blog post, which you can find here. Unfortunately, the deployment did not succeed. Below are snippets of the code from my serve ...

Loading a view in Ionic2 with Angular2 after a successful subscription

After completing an http post request, I want to navigate to the next view in my app. Here is a breakdown of the three services I am using: The server service handles generic http calls such as get and post requests. The city service stores a list of ...

Angular - Loading images on the fly

After scouring numerous resources, I couldn't find a resolution to my issue. For your information, I am utilizing ASP.net Core 2.0's default angular project In the process of developing an Angular application, I am faced with the challenge of ...

component is receiving an incompatible argument in its props

I am facing a situation where I have a component that works with a list of items, each with an ID, and a filtering function. The generic type for the items includes an ID property that all items share. Specific types of items may have additional properti ...

Access values of keys in an array of objects using TypeScript during array initialization

In my TypeScript code, I am initializing an array of objects. I need to retrieve the id parameter of a specific object that I am initializing. vacancies: Array<Vacancy> = [{ id: 1, is_fav: this.favouritesService.favourites.find(fav = ...

Typescript offers a feature where we can return the proper type from a generic function that is constrained by a lookup type,

Imagine we have the following function implementation: type Action = 'GREET' |'ASK' function getUnion<T extends Action>(action: T) { switch (action) { case 'GREET': return {hello: &a ...