javascript - Hvordan importere JQuery i en Typescript-fil?

Oppdater

Ingen import var nødvendig. I stedet måtte jeg legge til en referanse øverst i filen. Så den første linjen i WebAPI.js burde ha vært /// <reference path ="../typings/jquery/jquery.d.ts"/> i stedet for import { $ } from '../jquery-3.1.1';

Jeg prøver å importere jQuery for å bruke det i en Typescript-fil, men jeg får en rekke feil uansett hva jeg prøver. Jeg fulgte løsningene her og her, men uten hell.

tsconfig.json

{
    "compilerOptions": {
        "removeComments": true,
        "preserveConstEnums": true,
    "out": "Scripts/CCSEQ.Library.js",
    "module": "amd",
        "sourceMap": true,
    "target": "es5",
    "allowJs": true
}

WebAPI.js

import { $ } from '../jquery-3.1.1';

export class ExpenseTransaction extends APIBase {

    constructor() {
        super();
    }

    Get(): void {
        let expenses: Array<Model.ExpenseTransaction>;
        let self = this;
        $.ajax({
            url: this.Connection,
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function (data: any): void {
                expenses = self.ConvertToEntity(data.value);
            },
            error: function (data: any): void { console.log(data.status); }
        });
    };
}

Jeg har også prøvd import * as $ from '../jquery.3.1.1'

Feil

  • Module jquery-3.1.1 has no exported member $
  • Property ajax does not exist on type (selector: any, context: any) => any

Svar #1

Du må importere det som import * as $ from "jquery";, ifølge TypeScripts dokumentasjon, og jQuerys definisjonsfil er modulen definert som en ambient modul:

declare module "jquery" {
    export = $;
}

I følge dette:

Ambient-deklarasjoner er et løfte du gir til kompilatoren. Hvis disse ikke eksisterer under kjøring og du prøver å bruke dem, vil ting gå galt uten varsel.

Svar #2

En import er ikke nødvendig. Legg i stedet til en referanse til Typescript-definisjonsfilen øverst i filen. Så den første linjen i WebAPI.js bør være

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

i stedet for

import { $ } from '../jquery-3.1.1';

Ifølge DefinitelyTyped-wikien:

En TypeScript-deklarasjonsfil er en måte å definere typene, funksjonene og parameterne i et eksternt tredjeparts JavaScript-bibliotek. Ved å bruke en deklarasjonsfil i TypeScript-koden din vil det gjøre det mulig med Intellisense og typekontroll mot det eksterne biblioteket du bruker.

jquery.d.ts er en del av DefinitelyTyped-biblioteket som finnes på GitHub. DefinitelyTyped kan inkluderes i Visual Studio-prosjekter via NuGet Package Manager.

Svar #3

gjør dette : etter å ha installert jquery med npm eller brukt med cdn

først:

npm install @types/jquery --save-dev

og etter:

import * as $from 'jquery';

Relaterte artikler