CODEWITHSUNDEEP
angulartypescript
Tanzeel
Tanzeel

Reputation: 4998

How to use "as" syntax in TypeScript

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.

Upvotes: 1

Views: 632

Answers (4)

user8604852
user8604852

Reputation: 1

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;

Upvotes: 1

distante
distante

Reputation: 7005

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

Upvotes: 0

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11558

// 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.

Upvotes: 1

Tim B James
Tim B James

Reputation: 20364

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

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

Give that a shot.

Upvotes: 4

Related Questions