Write scalable JavaScript with static types. Learn TS syntax, generics, unions, narrowing, decorators, modules, build tooling, and tsconfig. Improve DX, refactoring safety, and API design across Node.js and frontend frameworks with practical examples.
626 posts185 contributors
I have two file now one is html and one is ts file. upon build js file is creating . but its not working in web browser. Index.html file.. <button id="increment">Increment</button> Counter.ts file...This below code is not working.. var inc=document.getElementById('increment') as HTMLButtonElement inc.addEventListener("click",test) function test():void{ console.log("Hello") } Even the test function showing duplicate function implementation
HTML Code: <div id="counterval" class="counter">0</div> <div class="buttons"> <button onclick="IncrementVal()" id="increment">Increment</button> </div> </div> Ts code: var buttonInc = document.getElementById("increment"); buttonInc?.addEventListener("click",IncrementVal); const counterDiv = document.getElementById("counterval"); var count=0; function IncrementVal() { count++; console.log("Count is : " + count) updateCounter(); } function updateCounter() { if(counterDiv) counterDiv.textContent = count.toString(); console.log(counterDiv) } Why value is not updating on click
Hi, I am trying to connect to SharePoint online document library using Azure Function to read excel file using TypeScript. do you have any TypeScript example similar to this? Any guidance would be appreciated. Thank you, Siva
What is the best way to pass a data array from angular to web API C#
I have try to filter set of dates from start and enddate but some dates got miss in list. let inactivatedate: any = new Date('2023-06-21'); let deactivatedate: any = new Date('2023-06-30'); let jobstartdate : any =['2023-06-01','2023-06-02','2023-06-03','2023-06-04','2023-06-05','2023-06-07','2023-06-08','2023-06-09','2023-06-10','2023-06-21','2023-06-23','2023-07-31']; let jobenddate : Date =new Date('2023-06-20'); let F = jobstartdate.filter( (f: Date) => ((new Date(inactivatedate).toDateString()) > (new Date(f).toDateString()) && (new Date(deactivatedate).toDateString())<= (new Date(f).toDateString())) ); console.log(F); Above mentioned filter return below mentioned dates only ["2023-06-01", "2023-06-03", "2023-06-04", "2023-06-05", "2023-06-07", "2023-06-08", "2023-06-10", "2023-07-31"] Missed Dates. ["2023-06-03","2023-06-09"] i want to filter based on inactivatedate and reactivate date. I try with DatePipe also that's not return a value and .toLocaleDateString and gettime also. Please help on this.
Hi, I have a button like below <button id="btn" (click) = test()>To Test</button> How to call the id - btn from component to typescript file to work for enable or disable Thanks
Hi, I have a ts file with changes to display the messages if(res.lenght>0) { for(var i=0;i<res.length;i++) { msg=msg+res[i].alert; } } Can you tell how to display like arrows to the msgs for previous and next ..like <Test 2> -- left for Test 1 and right for Test 3 and also this arrow to be hide incase the first msg or last msg Thanks
Hi Team I need some help when i run this code on coderbyte online IDE its giving me errors. The main objective is for me to toggle button on when its clicked and off when off. I tried to use this code found online as a test but in online IDE it does work. // toggle button on and off using angular component ts and class import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h1>Angular Toggle Button</h1> <toggle-button (changed)="checked=$event"> </toggle-button> <p>The state is {{checked ? 'ON' : 'OFF'}}.</p> `, styles: [ ` h1 { color: #DB5B33; font-weight: 300; text-align: center; } toggle-button { margin: 0 auto; } `] }) export class AppComponent { checked: boolean; }
I have a .ts file with: export module test.employee { export interface person { name: string; age: number; } } Now I want to import and use person interface/class in normal JS file. So how we can do that?
Hi! I am using react-bootstrap-typeahead 5.1.8 version. When I using typeahead it's show mistake in name. My code: return ( <> <label>{props.displayName}</label> <Typeahead id="typeahead" onChange={actor => { console.log(actor); }} options={actors} labelKey={actor => actor.name} filterBy={['name']} placeholder="Write the name of the actor..." minLength={1} /> </> ) Error: any Property 'name' does not exist on type 'Option'. Property 'name' does not exist on type 'string'.ts(2339) View Problem No quick fixes available
Hi, get App1(): boolean { this. service.app1; } get App2(): boolean { this. service.app2; } get App3(): boolean { this. service.app3; } get App4(): boolean { this. service.app4; } get App5(): boolean { this. service.app5; } How to create method for all above 5 getter. Thanks in Advance
This might be Angular and not Typescript. I have an Angular form that is saving the entire form instead of one component (Copy Schedule from Site) in the form. Is there a way to do that? My form setup is using formly in typescript and the autosave is set to true in the html. <div id="siteSchedule" class="linq-py-3"> <h3>Site Schedule</h3> <mat-divider></mat-divider> **<app-form [autosave]="true"** [form]="form" [fields]="fields" [model]="model" [options]="options" (submitted)="onSubmit($event)"> </app-form> </div> This is just the formly part of the typescript code. If more typescript would help I would provide. I have posted too much code before and have been told it's too much so please let me know if this is not enough. I don't want to post the entire Typescript if I don't have to. import {AutosaveService} from '@app/core/services/autosave.service'; constructor( @Inject(CoreApi.SiteApplicationClient) private readonly siteApplicationClient: CoreApi.ISiteApplicationClient, @Inject(SnackbarService) private readonly snackBar: ISnackbarService, private readonly autosaveService: AutosaveService, private readonly mealServiceDetailsService: MealServiceDetailsService, private readonly dialog: MatDialog ) {} copySiteScheduleControl: FormlyFieldConfig | undefined; model: SiteScheduleModel = { siteScheduleControl: undefined, monthsOfOperation: new CoreApi.MonthsOfOperation(), daysOfOperation: {days: []}, hoursOfOperation: {days: []}, exception: [], }; modelLoaded = false; form = new FormGroup({}); options: FormlyFormOptions = {}; fields: FormlyFieldConfig[] = [ { fieldGroupClassName: 'row', fieldGroup: [ { wrappers: ['form-field'], className: 'col-6', key: 'siteScheduleControl', type: 'select', templateOptions: { label
My application have multiple VMs where the frontend code(Angular) is deployed. Like 4 production server and 3 Staggig server. It is very difficult to pass the instrumentation Key in each environment while deploying the changes. Can anyone suggest what should be the best process to pass the key so that the details is fetched as per the deployment server.
I need to find the index for an array of type Date. Is it possible to declare date directly or I have to convert it to string? If converted to string how to find the index of that? If possible please provide any example for that.. Like the one below, interface Users { id: number; name: string; } let exampleArrObj: Array = [ { id: 1, name: 'infinitbility' }, { id: 2, name: 'notebility' }, { id: 3, name: 'repairbility' }, ];let objIndex = exampleArrObj.findIndex((e: Users) => e.name == 'notebility'); console.log('exampleArrObj index', objIndex); Here they have given id of type number and name of type string . The output for above code will be: exampleArrObj index 1 How can I add date type and find the index for that?
I'm confused between these two terms "Parameters" and "Variables". What is the difference between a parameter and a variable? Give one example for each of them.
Hi, i am getting the above error " mat-form-field must contain a MatFormFieldControl" when i try to use angular material mat-formfield, after a couple of google, i have found that we have to import mat-input, i have imported but still facing the error, can anyone help to resolve will be appreciable.
How to convert time in TypeScript? How to convert UTC to IST(UTC+5:30) in TypeScript?
I work on web application asp.net core 2.2 and angular 13 . How to display message Not Matched Excel from angular component when compare excel function return false What I have Tried [Route("ExportNxp")] public IActionResult ExportNxp() { bool areIdentical = ex.CompareExcel(dbPath, InputfilePath, out rowCount, out error); if (areIdentical == false) { return new JsonResult("Not Matched Excel"); } else { return PhysicalFile(zipPath, "application/zip", Path.GetFileName(zipPath)); } } Result I need display message "Not Matched Excel" on angular component where areIdentical = false
Kindly show me how to connect to SQL from typescripts. That is i want to add data from textbox in typescript to a SQL table.
need to access anchor tag / button attributes on click action
I need to get no of years falling between two dates in a typescript . for example : Date1 = '13/12/2020' and Date2 is '01/01/2023' I want result as 4
i have gridview in whict three column ,rate and Quantity column and Total amount shoukd show in third column called Total which is Label item template. I want do this by using java scripts <asp:GridView ID="gvWetFlyAshDtls" runat="server" AutoGenerateColumns="false" OnRowCommand="gvWetFlyAshDtls_RowCommand" OnRowEditing="gvWetFlyAshDtls_RowEditing" Style="border-collapse: collapse; width: 50%; margin: 0 auto;"> <Columns> <asp:TemplateField HeaderText="Wet Fly Ash Category"> <HeaderStyle HorizontalAlign="Center" /> <ItemStyle HorizontalAlign="Center" /> <ItemTemplate> <asp:Label ID="lblWet_Fly_Param" runat="server" Text='<%#Eval("WetFlyParam")%>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Trip"> <HeaderStyle HorizontalAlign="Center" /> <ItemStyle Hor
Hi, I'm connecting to the api with angular. It returns 200 as a result. But I am getting the following error. Why does this problem occur? What is the solution. Can you help me. Error : unexpected token o in json at position 0 at json.parse
Hi, I am using reactive form in angular. In this form, I am sending a request to the API. But I am getting select value and it gives an error. How can I resolve this error. Error : "The JSON value could not be converted to System.Int32. Path: $.OperationClaimId | LineNumber: 0 | BytePositionInLine: 34." <form [formGroup]="UserClaimsEdit" > <select class="form-select" aria-label="Default select example" formControlName="Id"> <option [selected]="true">Claim Seç</option> <option [value]="1">Users</option> <option [value]="2">Admin</option> </select> </form> UserClaimsEdit= new FormGroup({ UserId: new FormControl('',[Validators.required ]), OperationClaimId: new FormControl('',[Validators.required ]), }); SaveClaims(){ this.service.addClaims(this.UserClaimsEdit.value).subscribe(res=>{ this.UserClaimsEdit.reset(); }); }
Here is the property and method private errorMessages = new Map<string, () => string>(); public get errors(): Array<string> { if (!this.control) { return []; } const { errors } = this.control; return Object.keys(errors).map(key => this.errorMessages.has(key) ? this.errorMessages.get(key)() : <string>errors[key] || key); } I get this error on this on this part of the code this.errorMessages.get(key)() Can someone explain why the problem as to why I'm getting this error and a possible solution to the problem?
