What is the best way to enable code sharing between two TypeScript projects housed within the same repository?

Our project has the following structure:

api (dir)

-- package.json

-- tsconfig.json

-- src (dir)

-- client (dir)

---- package.json

---- tsconfig.json

---- src (dir)

The "client" directory houses a create-react-app project that proxies to the API during local development, which is why we have this particular directory structure.

We are looking for ways to share specific code (such as constants and utilities) between these two projects. We have tried various methods in TypeScript, like using multiple rootdirs, but haven't been successful.

Could you provide guidance on setting up code sharing between these two projects?

typescriptcreate-react-app

Answer №1

Here is my recommended project structure:

api
|- src
|- package.json
|- tsconfig.json
client
|- src
|- package.json
|- tsconfig.json
shared
|- src
   |- (place shared code here)
|- package.json
|- tsconfig.json
package.json
tsconfig.base.json (includes shared configuration options for all projects, such as strict mode)

You can then utilize yarn workspaces in your project to allow both projects to declare a dependency on the shared folder. Yarn will handle the dependency resolution among all three projects.

Remember to compile the code within the shared folder so that other projects can import it correctly.

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

Is it possible to dynamically check values in TypeScript?

[Summary] I am looking to dynamically expand my type in TypeScript based on an initial set of values. I want to avoid managing separate arrays/types and instead extend all strings in my type with '_max'. type ExtendedValueTypes = 'money&apos ...

typescripttype-declaration

Issue with mounting/rendering component in create-react-app when using React-Router

As a newcomer to React and react-router, specifically react-router-dom, I have been working on customizing an admin site template for our project. I've taken the existing components and organized them into separate classes within my app.js file, which ...

reactjsecmascript-6react-routercreate-react-app

[Protractor][Scroll] I need assistance with scrolling my webpage using a while loop. Could someone please help me troubleshoot the code?

When this function is called, it initiates scrolling and then pauses the browser for a 2-second period. scrollToElement(webElement: any) { browser.executeScript('window.scrollTo(0,400);').then(()=>{ console.log("sleepin ...

angulartypescriptseleniumselenium-webdriverprotractor

Incorporating a JavaScript file into Angular

I'm looking to incorporate a new feature from this library on GitHub into my Angular project, which will enhance my ChartJS graph. @ViewChild('myChart') myChart: ElementRef; myChartBis: Chart; .... .... const ctx = this.myChart.nativeEleme ...

javascriptangulartypescriptcharts

Extending Interfaces Using Keys from an Array in Typescript

When dealing with a scenario where you want a pointfree omit, you can achieve this: type PlainObject<T> = {[key: string]: T} const omit = <K extends string>( name: K ) => <T, U extends PlainObject<T> & { [P in K]: T }>( ...

typescripttypescript-typings

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

I am currently working with Ionic, Angular, and Typescript, attempting to dynamically set the value of a location based on the parameter passed from a method. Here is the relevant code snippet: async fileWrite(location) { try { const result = a ...

javascriptangulartypescriptionic-frameworkcapacitor

Angular 5: Unable to add a destroyed View to a ViewContainer

I encountered a new error in my Angular application that I haven't seen before. The issue is arising from this specific line in the Angular source code. This error occurs when I log out and then log back into my app. While on a certain route, there i ...

angulartypescript

Why is my Angular promise unexpectedly landing in the error callback?

I am facing an issue with my Angular + Typescript client. I have developed a PHP API and need to send a post request to it. Upon receiving the request, the server fills the response body with the correct data (verified through server debugging). However, w ...

angularjstypescriptangular-promise

ContentChildren to gather all offspring

Currently, I am in the process of compiling a list of components using data from the Back End. I have implemented a ContentChild object to obtain their reference, however, it seems to be empty. I also attempted using ViewChild, but it only captures the fir ...

angulartypescript

Exploring the power of utilizing multiple classes with conditions in Angular 2+

Can you help me figure out how to use a condition for selecting multiple classes with [ngClass] in Angular? <td> <span [ngClass]="{ 'badge badge-success': server.type === 'PRODUCTION', 'ba ...

angulartypescriptdjango-rest-frameworkangular6

Working with Angular: Managing an Array of Objects

After retrieving an array of objects using the code snippet below: this.serviceOne.getRemoteData().subscribe( data => this.MyArray.push(data) ); I encounter issues when trying to iterate through the array using the code snippet bel ...

angulartypescript

What is the correct way to specify type hints for a Stream of Streams in highlandjs?

I'm currently working with typescript@2 and the highlandjs library. In the typings for highland, there seems to be a missing function called mergeWithLimit(n). This function: Accepts a Stream of Streams, merges their values and errors into a single ...

genericstypescripttypescript-typingshighland.js

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

cssangulartypescriptsassrxjs

Efficient access to variable-enumerated objects in TypeScript

Let's say I have the following basic interfaces in my project: interface X {}; interface Y {}; interface Data { x: X[]; y: Y[]; } And also this function: function fetchData<S extends keyof Data>(type: S): Data[S] { return data[type]; } ...

typescript

The value of a checkbox in Ionic 2

I have implemented the code for reading checkbox values in Ionic 2 following the answer provided. However, I encountered an error message in the console: Cannot read property 'indexOf' of undefined Here is my home.html code: <form #leadsF ...

angulartypescriptionic2

Reusing methods in Javascript to create child instances without causing circular dependencies

abstract class Fruit { private children: Fruit[] = []; addChild(child: Fruit) { this.children.push(child); } } // Separate files for each subclass // apple.ts class Apple extends Fruit { } // banana.ts class Banana extends Fruit { } ...

javascriptnode.jstypescript

What is the best way to use Immer to update Zustand state when incorporating objects that are added through a controlled form using React-Hook-

Having some trouble with integrating Zustand and Immer using React-Hook-Form. My goal is to capture a series of values from a form, store them in a list, and allow for the addition of new objects to that list. In this scenario, the user inputs data for a ...

javascriptreactjsarraystypescript

What sets my project apart from the rest that makes TypeScript definition files unnecessary?

Utilizing .js libraries in my .ts project works seamlessly, with no issues arising. I have not utilized any *.d.ts files in my project at all. Could someone please explain how this functionality is achievable? ...

javascripttypescript

Enhance the functionality of Immutable.js field by integrating a custom interface in Typescript

Imagine a scenario where the property name is field, essentially an immutable object. This means that methods like field.get('') and other immutable operations are available for use. Nevertheless, I have my own interface for this field which may ...

reactjstypescriptimmutable.js

The module has defined the component locally, however, it has not been made available for

I have developed a collaborative module where I declared and exported the necessary component for use in other modules. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DateslideCompone ...

angulartypescriptionic-frameworkionic4ng-modules