How do I resolve error “TS2339: Property ‘gauge’ does not exist on type ‘JQuery’.”

I am working on an ionic (version 4) application and I want to implement a custom gauge meter.

Since, I am new to jQuery I am not sure what exactly this error means.

I am using a jQuery plugin jquery-gauge.min.js which contains a method gauge() as shown below which works perfectly fine and normally in any web application.

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  ngOnInit(): void {
    $('.gauge1').gauge({
      values: {
        0: '',
        10: '',
        20: '',
        30: '',
        40: '',
        50: '',
        60: '',
        70: '',
        80: 'Tier 1',
        90: 'Tier 2',
        100: 'Tier 3',
      },
      colors: {
        0: '#1aff1a',
        75.5: '#1aff1a',
        75.6: '#515e80',
        80: "#515e80",
        90: "#515e80",
      },
      angles: [
        180,
        360
      ],
      lineWidth: 10,
      arrowWidth: 0,
      arrowColor: '#ccc',
      value: 75.5
    });
  }
}

When I am implementing it on an ionic application it is throwing an error on line $('.gauge').gauge({...})

error “TS2339: Property ‘gauge’ does not exist on type ‘JQuery’

I have added jquery-gauge.min.js to the scripts in the angular.json file.

how can I resolve this error?

Answer

Found the solution.

use jQuery('.gauge1').guage() instead of $('.gauge1').guage()

Though I was new to jQuery, I didn’t know how plugins may behave differently in different platforms (don’t know why it exactly is) but, when I used the plugin in a .js file in a web app it worked by using $('.guage').gauge() but when I used it with ionic (or should say with .ts file) it required jQuery('.guage').guage() instead.

if anyone can explain why is that so. That will be grateful and helpful too.

Thanks.