Is there a way to compile all TypeScript files within a C# project's .csproj file?

Scenario

Every now and then, I find myself wanting to rebuild or recompile all TypeScript files in a typical VS 2017 .NET framework C# project (.csproj) without generating the dlls, and so on. I would greatly appreciate a simple console command solution for this.

Steps Taken So Far:

I have managed to compile everything using MSBuild: c:\>msbuild.exe my.csproj. In addition, I have discovered that the installed nuget package 

Microsoft.TypeScript.MSBuild.2.7.2
is embedded in my .csproj and has a CompileTypeScript target defined. However, when I execute 
c:\>msbuild.exe my.csproj -t:CompileTypeScript
, I get a result of 0 Errors, 0 Warnings, and no action is taken. It seems like the compiler is looking for the ts files in the wrong location or not finding any. (It is worth noting that an error message is displayed when referencing a non-existing target, confirming that the target is present.)

Query

Despite my attempts with MSBuild, I am keen on compiling all TypeScript files within the .csproj project and applying the same TypeScript compiler settings established there. How can I achieve this objective effectively?

typescriptmsbuildvisual-studio-2017

Answer №1

After experimenting, I found a solution that worked for me:

msbuild YourProject.csproj -t:CompileTypeScript -p:BuildingProject=true

I discovered that the "BuildingProject" condition is crucial in the "CompileTypeScript" task within Microsoft.TypeScript.targets:

<Target Name="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'" DependsOnTargets="$(CompileTypeScriptDependsOn)" Inputs="@(TypeScriptCompile)" Outputs="@(GeneratedJavascript)">

In essence, I had to manipulate the target to believe that the project was actively building in order for it to meet the condition and execute successfully.

It is worth noting that my experience is based on TS 1.6, so this workaround may not be applicable to version 2.7.2.

Answer №2

Build a custom MsBuild target that utilizes the EXEC task to run the tsc (TypeScript compiler). The tsc command will require the tsconfig.json file to specify where to locate and place the output files.

Include the following code snippet in your project:

<Target Name="TypeScriptCompiler">   
    <Exec Command="tsc [path to your tsconfig.json file]"/>  
</Target>

Make sure that the tsc compiler is added to your PATH environment variables.

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

Typescript error in Express: The property 'body' is not found on the type 'Request'

I found this code snippet: import bodyParser from 'body-parser'; import express, { Router } from 'express'; const router: Router = express.Router(); router.use(bodyParser.json()); router.post('/api/users/signup', (req: expr ...

node.jstypescriptexpressbackendbody-parser

Unexpected behavior observed in ng-select when pasting search values

When attempting to update an array of strings acting as the model for an ng-select, the values do not appear correctly in the search box. https://i.sstatic.net/WqdJ6.png The values that are displaying correctly are the ones selected from the dropdown men ...

javascriptarraysangulartypescriptangular-ngselect

No declaration file was found for the module named 'vue2-timepicker'

Overview I integrated the vue2-timepicker plugin into my Typescript/Nuxt.js application. However, I encountered an issue with importing vue2-timepicker. import timepicker from 'vue2-timepicker' Could not find a declaration file for module &apos ...

typescriptvue.jsnuxt.js

What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

I am currently in the process of updating the Paper.js Typings located on GitHub at this repository: github.com/clark-stevenson/paper.d.ts Within Paper.js, there exists a MouseEvent class, which is not an extension of JavaScript's MouseEvent, but ra ...

typescripttypescript-typings

Importing Heroicons dynamically in Next.js for more flexibility

In my Next.js project, I decided to use heroicons but faced a challenge with dynamic imports. The current version does not support passing the icon name directly to the component, so I created my own workaround. // HeroIcon.tsx import * as SolidIcons from ...

reactjstypescriptnext.js

What is the significance of utilizing an empty value `[]` for a typed array interface instead of using an empty `{}` for a typed object interface?

Why can I initialize friends below as an empty array [], but not do the same for session with an empty object {}? Is there a way to use the empty object without needing to make all keys optional in the interface? const initialState: { friends: Array< ...

typescript

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Can a new record be created by adding keys and values to an existing record type while also changing the key names?

If I have the following state type, type State = { currentPartnerId: number; currentTime: string; }; I am looking to create a new type with keys like getCurrentPartnerId and values that are functions returning the corresponding key's value in Sta ...

typescript

Accessing lifecycle methods for React components in TypeScript as a member

Utilizing the typescript react starter for tsx-driven react implementations requires specifying member access (public, private, protected) for any method utilized within a class component. This requirement stems from, I believe, the tslint.json file. Can ...

reactjstypescript

Displaying products with the active status set to 0 when utilizing the select feature in Angular

I need help displaying only data where "active" is set to 0. The data is retrieved in JSON format as shown below: { "StatusCode": 0, "StatusMessage": "OK", "StatusDescription": [ { "h_id": "1", "active": 0, "d ...

angulartypescriptmaterialize

How to declare a variable using new String() and s = '' in Typescript/Javascript

What is the correct way to declare an array of characters or a string in JavaScript? Is there a distinction between an array of characters and a string? let operators = new String(); or let operators = ''; ...

javascripttypescript

Switching to Next.js

In my Next JS application, I have a div that dynamically displays the currency and price of a product when a user visits a product page. <div className="flex"> <Image src={EuroCurrency} alt="Euro Sign} /> <h1 className=" ...

reactjstypescriptnext.js

Deriving union type in Typescript from values within a module or object

I'm trying to find a method similar to keyof typeof myModule in typescript. However, instead of a union of key strings, I need a union of the value types. I have a module with an increasing number of exports - myModule.ts: export const Thing1; expor ...

typescript

Dynamic routing with ngIf in Angular 2's router system

Is there a way to use *ngIf with dynamic router in Angular? Let's say I have a top navigation component with a back button, and I only want the back button to be visible on the route 'item/:id'. I tried using *ngIf="router.url == '/ite ...

javascriptangulartypescriptangular-routing

Accessing information from req.files in a TypeScript environment

I am currently using multer for uploading images. How can I retrieve a specific file from req.files? Trying to access it by index or fieldname has been unsuccessful. Even when I log it, I see that it's a normal array, so I suspect the issue may be rel ...

javascriptnode.jstypescriptexpressmulter

What purpose does a cast serve when used on a return type that is defined generically?

Consider this straightforward property access function export function accessProperty<T, K extends keyof T, P extends T[K]>(name: K, v: T): P { return v[name] as P } What is the significance of the cast as P in this context? I experimented with ...

typescript

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

angularhtmltypescript

After introducing 5 guard properties, the intersection of unions in Typescript breaks down

In TypeScript, I am attempting to create a class where properties are only accessible if another property has been checked on the class. This needs to be done in a generic manner to facilitate reuse across multiple classes. For instance, class Test { Fo ...

typescriptunion-typestypeguards

Crafting a model for arrays of objects - a guide to perfection

Why am I experiencing errors in the console when trying to set the API return to a variable? How can this issue be resolved? This is my TypeScript code: public myData = new myDataModel(); getData(){ this.myCoolService.getDataAPI() .subscribe(( ...

arraysangulartypescriptobjectmodel

Having trouble pushing data to a GraphQL database from my Next.js application

I am currently working on developing a Reddit-like platform. To simplify the process, I have integrated SQL with graphQL using Stepzen for endpoints. Below is the code snippet of my Post Box component for the site, which includes graphQL mutations.ts and q ...

reactjstypescriptnext.jsgraphql