15 May

Use jQuery in Angular/Typescript without a type definition

typescript

Together with Angular, Typescript is fast gaining popularity although it already exists since 2012.

Typescript is not your common JavaScript, but it gets compiled to JavaScript. Nevertheless it’s not always that simple to just copy some JavaScript code into your Typescript and make it work. To do this, you’ll sometimes need TypeScript type definitions which can be downloaded from various sources. Or you can simply use the InjectionToken from the Angular/Core package.
In this post, I’ll show you how to use it with jQuery.

DefinitelyTyped

The most commonly used repository with TypeScript type definitions is DefinitelyTyped. It can be found on GitHub via: https://github.com/DefinitelyTyped/DefinitelyTyped.
Here you can find all sorts of files for all different packages like jQuery, Bootstrap, Foundation,… You just need to import these packages inside your Typescript file and you’ll be ready to use them without compile errors.
Importing these files can be done simply be adding a reference on top of the file as in this example for jQuery:

/// <reference path="jquery/jquery.d.ts" />


InjectionToken

An other option is the InjectionToken. We’ll use the injectiontoken to inject jQuery into our TypeScript.
I’ll start with creating a jQuery.service.ts which will contain all the needed info.

jQuery.service.ts

As you can see, we’ll just create a token and link this to the global instance of jQuery.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

app.module.ts

In our app.module.ts we’ll have to import the service as well.
This will be done as a provider.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Use the Token in a component

As you can see in the code below, we import and inject the token to a “$”-sign which is declared as ‘any’.

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Now you can start using jQuery inside your TypeScript without the need of a type definition file.



Sources

2 thoughts on “Use jQuery in Angular/Typescript without a type definition

Leave a Reply

Your email address will not be published. Required fields are marked *