Top method for distributing TypeScript definitions within an npm workspace

I recently implemented a monorepo using npm's workspaces feature. Within this setup, I have two distinct applications that rely on an API residing in a separate repository. I am eager to share the typescript definitions of this API.

To achieve this, I created a "common" library within the monorepo for sharing code. While this works effectively for actual code sharing, I encountered an issue with the API definitions, which exist solely as d.ts files. These files are being ignored during the build process.

One solution I considered was writing class definitions in the common library and exporting them to the other applications. However, this is not as elegant as utilizing d.ts files. Are there any other approaches I could consider?

javascripttypescriptnpmnpm-workspaces

Answer №1

Assuming this specific project layout:

├── apps
│   ├── app1
│   └── app2
├── shared
│   ├── src
│   │   ├── utils
│   │   └── types
│   ├── package.json
│   └── tsconfig.json
├── package.json
└── tsconfig.json

Both applications can access the generated declarations by utilizing the tsconfig.json option 

references: [{ "path": "../shared" }]
to collect all declarations, such as those in .ts files under utils, from the designated outDir of shared

Furthermore, you can manually include the type definitions declared in .d.ts files located in shared/src/types with

"include": [ "../shared/src/types", ... ]
.

Alternatively, if the type definitions are not segregated into a different directory, you can incorporate them using a glob pattern like "../shared/src/**/*.d.ts

It may not be the most convenient method, but it appears to get the job done.

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

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

javascriptcssreactjsweb-applicationsmaterial-ui

Simple steps for integrating JavaScript ads into your WordPress website

Received an advertisement from my client, a 300x250 ad in ad folder consisting of 1 HTML file, 1 JavaScript file, and 1 images folder. Questioning how to integrate these files into the side panel of my Wordpress website's homepage. I've spent a ...

javascripthtmlwordpress

Access User Information from Facebook using Nativescript {N} oAuth Plugin

Developing an Android App with NativeScript I am in the process of creating an Android app using JavaScript and NativeScript. The initial page asks users to connect with Facebook, and my goal is to verify if an account exists with their email address. To ...

javascriptandroidfacebookoauthnativescript

Create a token for

Visit this link for more information on listing functions in Azure web apps https://i.sstatic.net/YgsF5.png Is there a way to dynamically generate the green-highlighted token using JavaScript or an API? While I'm aware that the token can be generate ...

javascriptazure-active-directoryazure-functionsazure-cliazure-rest-api

extract data obtained from an AJAX call

I am working on an ajax request in my code: var rootURL = "http://localhost/myapp/api/api.php"; $.ajax({ type: 'GET', url: rootURL + '/favourites', dataType: "json", success: function(list) { }, error: f ...

javascriptphpjqueryajaxjson

Encountered an error while using the node package manager to compile the project

While attempting to start a React project using npm run build, I'm encountering some bugs shown in the terminal. Any suggestions on how to troubleshoot this issue? https://i.sstatic.net/BXiId.png ...

reactjsnpm

Retrieve information for AJAX tooltip from a specific URL

I am currently utilizing a script for tooltips. Is there a method available to dynamically load the content of a tooltip from a URL (using dynamic content loaded from a PHP script) rather than specifying the path to an html/php file? For Example What I ...

javascriptphpjqueryajax

What is the most efficient way to implement hiding/showing elements, adding/removing classes, and optimizing code in jQuery?

Looking for a more elegant solution to toggle classes on a div when clicking a button? Current code logic: jQuery(document).ready(function($) { // Removing/adding classes to show/hide div elements on button click // More efficient w ...

javascriptjqueryhtml

Stop jquery and/or x-editable from automatically converting strings into objects

I am facing an issue where I want to display a JSON string using x-editable, but it is converting it into an object against my wishes. This results in [object Object] being displayed instead of the actual string. How can I prevent this from happening? var ...

javascriptjqueryjsonx-editable

The componentDidMount function is not initializing the state

I am trying to access the references from the render function and then set them to the state. Below is my code snippet: class App extends Component { constructor(props) { super(); this.arr = this.generateTimelineArray(); ...

javascriptreactjsstate

An interface with generic type restrictions that allows for a default type to be specified

I have developed a straightforward generic interface using typescript interface DateAdapter<T> { clone(): T; } and I've implemented the interface in a basic class class StandardDateAdapter implements DateAdapter<StandardDateAdapter> { ...

typescriptgenerics

Guide on accessing js file in an Angular application

I have a component where I need to create a function that can search for a specific string value in the provided JavaScript file. How can I achieve this? The file path is '../../../assets/beacons.js' (relative to my component) and it's named ...

javascriptangulartypescriptfunctionfile

What is the best way to display the most recent release of a pip package?

Is there a similar command in pip/python to npm show {package} version that allows us to retrieve the latest version of any package without necessarily upgrading to it? I'm looking for a way to only output the most recent version number available for ...

pythonshellnpmpippackage

Error: Unable to access 'useRef' property of null object due to TypeError

Currently, I am using a combination of Next.js, TypeScript, sanity, and tailwindcss in my project. I have come across an error while attempting to utilize the react-hook-form. I have experimented with different approaches: Converting the Post function in ...

reactjstypescriptnext.jsreact-hook-form

How can you switch the property of an object within a VueJS array?

I'm currently working on developing a user feedback form that allows users to rate the quality of the food items they have ordered. I have an array called foodItems that displays the list of available food items along with predetermined reactions. My ...

javascriptvue.jsvuetify.js

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

javascriptjqueryipad

What steps are involved in installing Angular 2 through NPM?

Currently, I am in the process of setting up my personal local development environment for an Angular 2 application without utilizing the QuickStart seed mentioned on the official Angular 2 website or the Angular CLI due to the surplus files that come with ...

javascriptangulartypescriptnpm

The v-text-field within the activator slot of the v-menu mysteriously vanishes upon navigating to a new route within a

Working on my Nuxt project with Vuetify, I encountered an issue where the v-text-field would disappear before the page changed after a user inputs date and clicks save. This seems to be related to route changing, but I have yet to find a suitable solutio ...

javascriptreactjsvue.jsvuetify.jsnuxtjs

Count the number of items in a JSON array in AngularJS with a specific ID

To get the total count of articles in a JSON array, I use the following method: Home.html <div ng-controller="pfcArticleCountCtrl">Number of Articles {{articlecount.length}} items</div> Controllers.js // Calculate total number of articles p ...

javascriptjsonangularjs

Using Vue3 to Enable or Disable the Submit Button Based on Changes in Editable Form Content

Here is a practical example, demonstrating how to create an editable address form. The save button should remain disabled if the form remains unchanged, as there is no need to submit it. However, when a value changes, the save button should become enabled ...

javascriptvue.js