Executing numerous TypeScript 'tsc' commands

I'm currently working on setting up an NPM command to transpile two separate Typescript projects located in subdirectories within my application, followed by starting the server.

Within my 'src' public folder, I have 'Server' and 'Client' directories each with their own tsconfig.json files due to different module systems being used.

I'm attempting to create an npm command that will transpile both of these Typescript projects before launching the server but I'm struggling with finding the correct way to do so. I had initially thought it might look something like this:

tsc /src/Server/*.ts && tsc /src/Client/*.ts && node /src/Server/server

Below are the contents of the two tsconfig.json files for reference:

In /src/Server

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

And in /src/Client

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Are there any viable solutions to achieving what I've described above?

Thank you in advance!

Answer №1

Absolutely! You have the capability to achieve that goal. To demonstrate, I have set up an example repository which you can explore:

https://github.com/NickolasAcosta/typescript-multiproject

To get it functioning properly, follow these steps:

npm install
npm start

This setup utilizes the concurrently package from npm to handle multiple tasks simultaneously.

The project structure resembles this:

root
- src
  - project1
    - foo.ts
    - tsconfig.json

  - project2
    - bar.ts
    - tsconfig.json

In the package.json file:

{
  "name": "typescript-multiproject",
  "description": "compile multiple typescript sites with one npm script",
  "private": true,
  "scripts": {
    "start": "concurrently \"npm run tsc1\" \"npm run tsc2\"",
    "tsc2": "tsc -p src/project1",
    "tsc1": "tsc -p src/project2"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^1.8.10",
    "concurrently": "2.1.0"
  }
}

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

The 'default' property in Topojson is currently not defined

I've been grappling with this issue for the past hour to no avail. My current task involves working with d3-world-maps, which has a dependency on topojson. The problem seems to be stemming from within the d3-world-maps package: var _topojson = requi ...

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

Curious about the missing dependencies in React Hook useEffect?

I'm encountering the following issue: Line 25:7: React Hook useEffect has missing dependencies: 'getSingleProductData', 'isProductOnSale', and 'productData'. Either include them or remove the dependency array react-hoo ...

Tips for conducting a worldwide search in Angular 2?

I'm currently navigating my way through angular2 development and I am aiming to conduct a comprehensive search within an array of JSON objects. To illustrate, consider this sample array: invoiceList = [ { invoiceNumber: 1234, invo ...

To set up Grunt-uncss, use the command npm install grunt-uncss in

I am fairly inexperienced with Grunt and currently exploring the use of Uncss. I've noticed that there are two ways to install it using npm: npm install uncss --save-dev and npm install grunt-uncss --save-dev. Apart from one using phantom.js, is ther ...

Simple steps for Mocking an API call (Get Todos) using ComponentDidMount in React with Typescript, Jest, and Enzyme

About the application This application serves as a basic To Do List. It retrieves tasks from an API located at https://jsonplaceholder.typicode.com/todos?&_limit=5. Objective of the project The main goal is to test an API call that triggers ...

The HTML file that was typically generated by Webpack is now missing from the output

While working on my nodejs app using typescript, react, and webpack, everything was running smoothly. I was getting the expected output - an HTML file along with the bundle file. However, out of nowhere and without making any changes to my code, I noticed ...

The operation to assign a value to property 'two' cannot be completed as it is currently undefined

I'm facing an issue with the code below and cannot figure out why I am encountering the error message. I have ensured that each object contains a value, so why is there a reference to 'undefined'? Cannot set property 'two' of unde ...

What could be causing the malfunction of my button's event handlers?

Users can fill out a form in which they provide information about a grocery item they want to add to their cart. After completing the form, they can click on the "Add Item" button. Here's the form in my app.component.html: <form (ngSubmit)="a ...

Create a hierarchical tree structure using a string separated by dots

I am struggling with organizing a tree structure. :( My goal is to create a tree structure based on the interface below. export type Tree = Array<TreeNode>; export interface TreeNode { label: string; type: 'folder' | 'file'; ...

Tips for keeping your semantic-ui up-to-date

Following the instructions in the document, I successfully installed semantic: npm install semantic-ui --save cd semantic/ gulp build I have customized the variables, but I am concerned that my changes may be lost if I update semantic using npm update se ...

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

Nested HTTP requests in Angular using RxJS: Triggering component update after completion of the first HTTP request

I have a requirement to make two http requests sequentially. The values retrieved from the first call will be used in the second call. Additionally, I need to update my component once the first http request is completed and also update it once the second ...

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

I'm working with a TypeScript single file vue component. I've encountered an issue where the template does not display the values returned by certain component methods. Here's a snippet of the template: <div class="order-items"> ...

When attempting to install the cube using npm, an error message was encountered stating "No distribution

Running Ubuntu 14.04 and just installed nodejs, npm, and mongodb. Trying to install cube with npm install cube but encountering the following errors: npm ERR! Error: No dist in websocket-server package npm ERR! at next (/usr/share/npm/lib/cache.js:746 ...

Managing errors with the RxJS retry operator

I'm facing an issue with my RxJS code where I need to continuously retry a data request upon failure while also handling the error. Currently, I am using the retry operator for this purpose. However, when attempting to subscribe to the retry operator ...

Issue encountered while executing gulp start

I've been searching high and low but I just can't seem to find the error. Hopefully, someone out there can lend a hand. npm -v [18:54:13] Requiring external module babel-core/register [18:54:13] CLI version 3.9.0 [18:54:13] Local version 3. ...

What imports are needed for utilizing Rx.Observable in Angular 6?

My goal is to incorporate the following code snippet: var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: { lat: -25.363, lng: 131.044 } }); var source = Rx.Observable.fromEventPattern( function (han ...

What is the proper way to define a new property for an object within an npm package?

Snippet: import * as request from 'superagent'; request .get('https://***.execute-api.eu-west-1.amazonaws.com/dev/') .proxy(this.options.proxy) Error in TypeScript: Property 'proxy' is not found on type 'Super ...