Using JavaScript in typescript with JQuery

Question

I am trying to use a 3rd party library (autonumeric) with Typescript + Angular2.

I have tried the following

/// <reference path="/typings/main/ambient/jquery/index.d.ts" />
declare interface JQuery {
    autoNumeric: any;
}

and on init I am trying to use it.

ngOnInit() {
        $('selector').autoNumeric('init', {options});
    }

But when I compile, I am getting the following error.

error TS2339: Property 'autoNumeric' does not exist on type 'JQuery'

I am not getting where I am going wrong. Any help would be appreciated

NOTE

I have included the autonumeric.js in the index.html

kemsky · Accepted Answer · 2016-04-18 23:03:03Z

1

I did it exactly like you and it works fine. You should create definition file to extend JQuery interface and add reference to *.d.ts file to main.ts:

/// <reference path="./typings/declarations.d.ts" />

where declarations.d.ts contains:

declare interface JQuery {
    autoNumeric: any;
}

edited Apr 18, 2016 at 23:03

answered Apr 18, 2016 at 22:29

kemsky

15.4k3 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kemsky Over a year ago

hm, try this one jQuery('selector').autoNumeric('init', {options});

kemsky Over a year ago

i've update the answer, you have to put this declaration to separate *.d.ts file, otherwise it will not compile.

TGH · Accepted Answer · 2016-04-19 01:57:24Z

1

In my case I just kept it simple and declared jQuery as an any

import {Component, ElementRef, OnInit} from 'angular2/core';
declare var jQuery:any;

@Component({
    selector: 'jquery-integration',
    templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;
    constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
        jQuery(this.elementRef.nativeElement).draggable({containment:'#draggable-parent'});
    }
}

Here is the full example: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

answered Apr 19, 2016 at 1:57

TGH

39.4k12 gold badges106 silver badges140 bronze badges

Collectives™ on Stack Overflow

Using JavaScript in typescript with JQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related