How to use "as" syntax in TypeScript

Question

I'm working on an angular project. It is working perfectly. But it is failing a linting test. This question wasn't very helpful. This the error I'm getting:

ERROR: C:/Users/.../monthpicker.component.ts:164:22 - Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
Lint errors found in the listed files.

And that line 164 is in my ts file:

testMethod() {
    this.text = (<HTMLInputElement>document.getElementById('rangeInput')).value;
}

I'm new to Angular. I don't know what to do. I cant remove <> because rangeInput is an input element in my HTML:

<input id="rangeInput" [ngModel]="text" placeholder="Select range" />

Please help me. How to fix this and pass this linting test. I'm using Node v10.15.3.

PS: there is no error or warning when this project runs. It happens only during git push when it starts linting tests.

score 4 · Accepted Answer · answered Jan 03 '20 at 11:01

4

I've not tested this, but usually the syntax would be;

testMethod() {
    this.text = (document.getElementById('rangeInput') as HTMLInputElement).value;
}

Give that a shot.

answered Jan 03 '20 at 11:01

Tim B James

20,084
4
73
103

No Sir. `input` is a self closing tag. This will not work. I'm sure. I've tried this previously. :-( – Tanzeel Jan 03 '20 at 11:03
Sir I'm extremely sorry i think I've misunderstood something. Your answer is working. But I previously had a similar problem. There it was giving some error. I'll tell you that also someday. I'm accepting this for now. Thanks a lot :-) – Tanzeel Jan 03 '20 at 11:24
I got it. Here. This one: https://stackoverflow.com/questions/58050900/innerhtml-not-working-with-input-tag-but-value-does. – Tanzeel Jan 03 '20 at 11:30

makeitmorehuman · Answer 2 · 2020-01-03T11:09:52.303

// When stand Alone

// To add before statement
// -/ <intendedType>StatementThatResolves();
const myCanvas1 = <HTMLCanvasElement>document.getElementById("something");
// To add after statement
// -/ StatementThatResolves() as intendedType;
const myCanvas2 = document.getElementById("something") as HTMLCanvasElement;

// When you need to group use ()

// To add before statement
// -/ <intendedType>StatementThatResolves();
const myCanvasHasWidth1 = (<HTMLCanvasElement>document.getElementById("something")).hasAttribute("width");
// To add after statement
// -/ StatementThatResolves() as intendedType;
const myCanvasHasWidth2 = (document.getElementById("something") as HTMLCanvasElement).hasAttribute("width");

For better clarity, try to standardise the casting method you like using linting rules.

this looks good. I'll try and come back to you if required. :-) — Tanzeel, Jan 03 '20 at 11:08

Noob · Answer 3 · 2020-01-03T12:02:45.517

I don't think you even need the "as". Did you try:

testMethod() {
    this.text = (document.getElementById('rangeInput')).value;
}

Or as in here

const el: HTMLElement = document.getElementById('content');

Though if you just need to pass a value to the method just use

<input id="rangeInput" [ngModel]="text" placeholder="Select range" (change)="testMethod($event)" />

testMethod(event: any) {
    this.text = event.target.value;
}

Notice that you can use any other event that input supports to trigger the method(besides change as in this example)

Or just make use of two way binding as found here

<input id="rangeInput" [(ngModel)]="text" placeholder="Select range"/>

const text: string;

score 0 · Answer 4 · answered Jan 03 '20 at 11:41

I would strongly recommend that you deletes document.getElementById because it could bring a lot of problems when your project become more complex because it is complete outside angular.

If you want to access your rangeInput you can just send it to your function. First give it an angular id:

<input id="rangeInput" #angularIdExample [ngModel]="text" placeholder="Select range" />

and send it to your method. Here I am using a button

<button (click)="testMethod(angularIdExample)">testMethod</button>

then you can access it in your method giving it the correct type

testMethod(inputElement: HTMLInputElement) {
    this.text = inputElement.value;
  }

Example: https://stackblitz.com/edit/angular-sending-input-reference

How to use "as" syntax in TypeScript

4 Answers4