Leveraging a shared library in Typescript

How can I efficiently share code between different codebases that are all written in TypeScript and constantly being developed?

I am seeking a straightforward solution.

Some of the methods I have attempted include:

1 Utilizing import statements with paths to other projects:

import { type } from '../../otherProj/src/type';

This method has resulted in the following error:

error TS2307: Cannot find module '../../otherProj/src/type'

2 Using npm modules

I have tried installing locally using:

npm i ../otherProj

However, this approach presents issues as I need to update the version of the library for each change or manually uninstall/reinstall it.

3 Implementing git submodule / subtree

I have experimented with utilizing a git submodule.

4 Creating Softlinks / Directory Junctions

Given that we are operating on Windows, we are currently employing the mklink /D /J method.

Are there any alternative approaches worth exploring?

gittypescriptnpm

Answer №2

After encountering an issue, I implemented a gulp-task to monitor the code base in the primary location and transfer both the source and compiled output to the secondary project/target. The shared library is situated at the root of both projects with identical relative paths.

In the target project, I have added the copied source files to .gitignore.

While this method works well, it does have a significant drawback – symbol references in the editor direct me to edit the mirrored code instead of the original source. I contemplated using a git "submodule" approach to manage both trees simultaneously, but dismissed it due to increased complexity and dependencies on the source server.

Transitioning from .net with compiled and shared assemblies, I have found this issue to be unexpectedly challenging. Is trying to replicate this behavior in Typescript not the optimal solution?

function compileUtils() {
    // Attempted to utilize syncy tool for synchronization, but had issues with "../", so had to resort to manual syncing.
    //   Note: This may result in errors when files are removed or renamed.
    return gulp.src(utilsPath)
        .pipe(gulp.dest('./utils'));
}

function compileBuiltUtils() {
    // Similar to the function above, copies the built utils files
    return gulp.src(utilsBuiltPath)
        .pipe(gulp.dest('./build/utils'));
}

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

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

Currently working on a vscode extension, I'm facing an issue with containing the html in a string (like this: https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/src/extension.ts). It leads to a large file size and lack ...

htmltypescriptvscode-extensionsstring-interpolation

ANGULAR: Issue with filtering an array by clicking a button is not functioning

I've been attempting to apply a filter to my array by using modulo on the id when clicking multiple buttons. I initially tried using pipe but was advised to stick with .filter(). Despite watching numerous online tutorials, I keep encountering errors o ...

arraysangulartypescriptfilter

How can I resolve the "peerinvalid" error while running NPM install?

My CircleCI suddenly stopped working today due to a peer-invalid issue that has been causing the problem. The error message displayed is as follows: src/index.js -> lib/index.js npm ERR! Linux 3.13.0-91-generic npm ERR! argv "node" "/home/ubuntu/nvm/v0 ...

node.jsnpmnpm-install

Bringing a JavaScript function into a TypeScript file results in it being treated as a namespace

Trying to bring a vanilla JavaScript function into a TypeScript file within a React Native app has presented some challenges. The import process goes smoothly when working with JS, but switching to TS triggers the error message: Cannot use namespace &apos ...

javascripttypescriptreact-native

What would be a colloquial method to retrieve the ultimate result from the iterator function?

I've got a rather complex function that describes an iterative process. It goes something like this (I have lots of code not relevant to the question): function* functionName( config: Config, poolSize: number ): Generator<[State, Step], boo ...

javascripttypescriptiteratorgeneratoryield

Generate unique IDP SAML replies

Currently, I am working on creating unit test cases for validating SAML responses. To achieve this, I am seeking guidance on generating multiple SAML responses in XML format using the necessary certificates and private keys. Are there any Node.js librari ...

javascriptnpmsamlsaml-2.0idp

The circular reference error in Typescript occurs when a class extends a value that is either undefined, not a constructor,

Let me begin by sharing some context: I am currently employed at a company where I have taken over the codebase. To better understand the issue, I decided to replicate it in a new nestjs project, which involves 4 entities (for demonstration purposes only). ...

javascriptnode.jstypescripttypeorm

When attempting to run the npm install mathjs command, an error is displayed

Trying to install mathjs using npm but encountering an error: npm install mathjs The error message received is as follows: npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write npm WARN tar T ...

javascriptnpm

The date selector module from npm is not functioning properly within the React Native platform

My project involves creating a date picker app with the help of react-native-modal-datetime-picker. I have set up a button to trigger the time picker, but it is not displaying as expected. Below is my constructor properties: constructor (props) { ...

reactjsreact-nativenpm

Is there a way to make Typescript accept dot notation?

Is there a way to suppress the compile time error in Typescript when using dot notation to access a property that the compiler doesn't know about? Even though using bracket notation works, dot notation would be much more readable in my specific case. ...

angulartypescriptjasmine

Encountered an issue with the Dynamic Form: TypeError - The property 'value' is undefined and cannot be read

RESOLVED An incorrect value was causing an issue with the onChange function. public onChange = (e:any, key:any) => { this.setState({ [key]: e.target.value }); }; I'm struggling to resolve an error while inputting data into my form in T ...

reactjstypescriptdynamicreact-reduxtypescript-typings

What sets apart 'export type' from 'export declare type' in TypeScript?

When using TypeScript, I had the impression that 'declare' indicates to the compiler that the item is defined elsewhere. How do these two seemingly similar "types" actually differ? Could it be that if the item is not found elsewhere, it defaults ...

typescripttypesdeclare

What is the reason for the presence of two checks in a binary npm file

The content of every binary located in the node_modules/.bin directory is as follows: #!/bin/sh basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") case `uname` in *CYGWIN*) basedir=`cygpath -w "$basedir"`;; esac # Check if the ...

node.jsnpm

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

While trying to validate my Angular application, I encountered the following error: src/app/register/register.component.ts:45:39 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used ...

javascriptangulartypescript

Issue with npm task failing to generate node_modules directory within Azure pipeline

This project differs from a standard node project as it is actually an MVC Web Application. The main goal here is to bundle the Quill.js library using npm steps within the Azure pipeline. The issue at hand is that the node_modules folder, which contains t ...

azurenpmazure-pipelinesnode-modulesquill

Potential explanation for unexpected Typescript initialization error

I am encountering the compiler error The property 'options' is not initialized or assigned in the constructor. However, upon reviewing the code for the respective class, it is clear that this reported error does not accurately reflect the actual ...

typescript

What is the best way to incorporate a formArray into a formGroup?

Before anything else, I want to apologize for any errors in my English. I seem to be having trouble adding an array field to a formGroup. My issue arises when attempting to use the push method to add a formArray to my rate formGroup. It appears that the ...

javascriptangulartypescriptangular-reactive-forms

The declaration file for 'autobind-decorator' is missing in TypeScript and cannot be located

Having a bit of trouble with my Typescript project. I'm trying to import the 'autobind-decorator' package, but I hit a roadblock. When compiling, I keep running into this error: cannot find declaration file for 'autobind-decorator&ap ...

node.jstypescriptnpm

Understanding Angular's Scoping Challenges

I have a function that retrieves an array and assigns it to this.usStates. main(){ this.addressService.getState().subscribe( (data:any)=>{ this.usStates = data; if(this.usStates.length===0) { this.notificationServic ...

angulartypescriptscoping

Creating a customizable React application with an extra environmental setting

I'm currently working on an app that requires some variations. While the core remains the same, I need to customize certain parts of the app such as color schemes and images. My inquiry is: Is it feasible to construct an app with a specified instance ...

javascriptnode.jsreactjsnpm