Exploring the Asp.net core build pipeline within vscode, with a focus on TypeScript development - in the current year of

I'm currently working on integrating Typescript into my ASP.NET Core MVC application in VS Code for the wwwroot client scripts. I've been following tutorials which primarily focus on using Visual Studio's compilation-on-save feature, but unfortunately, VS Code does not offer this capability. Having a background in the node stack and previous experience with ASP.NET before VS Code and folder-based projects, I am seeking guidance on how to manage and enhance the build pipeline.

My main questions revolve around how to incorporate a typescript compilation step into the existing build pipeline. Additionally, I'm curious about the best practices for managing client-side packages - should they be handled through nuget?

One approach I am considering is treating the client scripts as a separate project's bundled output and then using an additional script to sequentially build both the Typescript and ASP.NET projects. However, I would prefer to utilize the csproj's build process if possible to streamline the workflow.

typescriptasp.net-corevisual-studio-codebuild

Answer №1

For those utilizing angular or react, the best approach would be to start from one of the dot net projects: https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-5.0&tabs=visual-studio

Otherwise, all components will need to be set up manually:

  1. Firstly, Install Node.js Package Manager

  2. Then, Install typescript using the node package:

    npm install -g typescript

  3. Follow the necessary steps for setting up compilation and debugging in:

    https://code.visualstudio.com/docs/typescript/typescript-compiling

    as well as

    https://code.visualstudio.com/docs/typescript/typescript-debugging

Additionally, reference:
https://code.visualstudio.com/Docs/languages/typescript https://code.visualstudio.com/docs/typescript/typescript-tutorial

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

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

I'm encountering an issue when trying to pass the doSomething function into performAction. The error message I'm receiving is Expected 0 arguments, but got 1 interface SomeInterface { name: string, id: string } function doSomethingFunction( ...

javascripttypescript

I'm curious, where does Visual Studio create the dist folder when you run an Angular Web Application?

Currently utilizing Visual Studio 2019 Community Edition, although the same situation also pertains to VS2017 and other editions of 2017/2019. While developing/running an ASP.NET Core Web Application with an Angular web project, I'm unable to locate ...

angularvisual-studioasp.net-core

Issue with migrating TypeOrm due to raw SQL statement

Is it possible to use a regular INSERT INTO statement with TypeOrm? I've tried various ways of formatting the string and quotes, but I'm running out of patience. await queryRunner.query('INSERT INTO "table"(column1,column2) VALUES ...

sqltypescriptpostgresqltypeorm

Create a new visual masterpiece using Canvas by repurposing an

I am currently working on the following code snippet; export default async function draw(elRef : RefObject<HTMLCanvasElement>, tileData : TileProps) { const canvas = elRef.current!; const ctx = canvas.getContext('2d')!; ctx.clearRect( ...

javascriptreactjstypescriptcanvas

utilize the useRef hook to display the total number of characters within a text area

Introducing the following component: import React from 'react'; export interface TexareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { maxLength?: number; id: string; } export const Textarea = React.forwardRef( ( ...

javascriptreactjstypescriptreact-hooksuse-ref

What strategies can I use to preserve type narrowing when utilizing the Array.find method?

Within the code snippet below, I am encountering a typescript compilation error specifically in the Array.find method. Despite checking that `context.params.id` is not `undefined`, my type seems to lose its narrowing. I'm puzzled as to why this type ...

typescript

Learn how to implement AuthContext and createDataContext in React Native Expo development using TypeScript

AuthContext.tsx import createDataContext from './createDataContext'; import serverApi from '../api/server'; const authReducer = ({state, action}: any) => { switch(action.type){ default: return state; } } ...

reactjstypescriptreact-native

Having trouble importing a custom NPM package into Typescript code

I currently have a Typescript web project (2.1.6) compiled using Webpack in VScode. I am incorporating a third-party logging client which I am attempting to upload to NPM and use as a regular dependency. The existing logging client was originally written ...

typescriptnpm

Utilizing a library that solely enhances the functionality of the Array object

I have a library with type definitions structured like this: declare global { interface Array<T> { addRange<T>(elements: T[]): void; aggregate<U>(accumulator: (accum: U, value?: T, index?: number, list?: T[]) => an ...

angulartypescriptnpm

Error in Angular Material: SassError - The CSS after "@include mat" is invalid. Expected 1 selector or at-rule, but found ".core();"

My Angular 11 project was running smoothly with Angular Material version 11 until I decided to update everything to Angular 12, including Material. However, after the update, the styles.scss file that comes with Material started throwing errors. The comple ...

angulartypescriptangular-material

What is the best way to preserve all props while typing a styled component in Typescript?

I'm just starting out with styled components and I want to ensure that I can properly type my styled components so that I can easily utilize all the props I pass, not just the ones defined in the theme or through an interface. Is there a way to achie ...

reactjstypescriptstyled-components

Exploring the concept of individuality within front-end development

Would it be possible to manage identity directly on the front end using Angular's auth guard instead of setting up identity management on the server-side? The auth guard could handle all aspects of identity, even for smaller projects. For instance, in ...

angularasp.net-coresecurityasp.net-identitybackend

Steps to define a JavaScript mixin in VueJS

Currently, I am working on a Vue project with TypeScript and in need of using a mixin from a third-party library written in JavaScript. How can I create a .d.ts file to help TypeScript recognize the functions defined in the mixin? I have attempted the fol ...

javascripttypescriptvue.js

Seeking clarification on how the Typescript/Javascript and MobX code operates

The code provided below was utilized in order to generate an array consisting of object groups grouped by date. While I grasped the overall purpose of the code, I struggled with understanding its functionality. This particular code snippet is sourced from ...

javascriptreactjstypescriptmobx

An issue occurred while attempting to differentiate the '[object Object]'. Angular-11 Application only accepts arrays and iterables for this operation

When using *ngFor, I am facing an issue with fetching data from my component.ts to my component.html Interestingly, the same method works for one class but not for another. Let's take a look at my service class: export class FoodListService { priv ...

javascriptangulartypescriptrxjsangular-ui-router

The compiler mistakenly infers an incorrect type while utilizing a default value for a discriminated union type

I am currently working on a simplified component: export type BaseProps = { size?: 'xs' | 'sm' | 'md' | 'lg'; } type ButtonAsButtonProps = Omit<React.ComponentPropsWithoutRef<'button'>, ' ...

javascriptreactjstypescript

Adding TypeScript types to an array within a function parameter: A step-by-step guide

Having some trouble defining the array type: The code below is functioning perfectly: const messageCustomStyles: Array<keyof IAlertMessage> = [ 'font', 'margin', 'padding' ]; r ...

javascripttypescript

What is the best way to overload a function based on the shape of the argument object in

If I am looking to verify the length of a string in two different ways (either fixed or within a specific range), I can do so using the following examples: /* Fixed check */ check('abc', {length: 1}); // false check('abc', {length: 3}) ...

typescriptfunctionoverloading

What steps can I take to resolve this state bug in React?

Looking to create a react application where pressing enter on a block adds a new block below it, pushing the existing blocks down. However, encountering an issue where pressing enter on one block causes a later block to disappear. Seeking guidance on iden ...

reactjstypescript

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Attempting to streamline my action shorthand that interacts with AsyncActionCreators. A function has been crafted to accept a React dispatch: Dispatch<T> parameter: const fetchProfileAction = actionCreator.async<void, Profile, any>('FETC ...

javascripttypescriptgenericstypescript-typings