web-dev-qa-db-fra.com

Comment importer JQuery dans un fichier TypeScript?

Mettre à jour

Aucune importation n'était requise. Au lieu de cela, je devais ajouter une référence en haut du fichier. Donc, la première ligne de mon WebAPI.js aurait dû être /// <reference path ="../typings/jquery/jquery.d.ts"/> au lieu de import { $ } from '../jquery-3.1.1';

J'essaie d'importer jQuery pour l'utiliser dans un fichier TypeScript, mais je reçois diverses erreurs avec tout ce que j'essaie. J'ai suivi les solutions ici et ici , mais sans aucune chance.

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); }
        });
    };
}

J'ai aussi essayé import * as $ from '../jquery.3.1.1'

Les erreurs

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

Une importation n'est pas requise. Ajoutez plutôt une référence au fichier de définition TypeScript en haut du fichier. Donc, la première ligne du WebAPI.js devrait être 

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

au lieu de 

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

Selon le wiki DefinitelyTyped :

Un fichier de déclaration TypeScript est un moyen de définir les types, les fonctions et paramètres dans une bibliothèque JavaScript externe tierce. En utilisant Un fichier de déclaration dans votre code TypeScript activera Intellisense et tapez vérification par rapport à la bibliothèque externe que vous utilisez.

jquery.d.ts fait partie de la bibliothèque DefinitelyTyped présente sur GitHub. Définitivement typé peut être inclus dans des projets Visual Studio via le gestionnaire de packages NuGet.

14
Tim Hutchison

Vous devez l'importer en tant que import * as $ from "jquery";, conformément à la documentation de TypeScript et au fichier de définition de jquery , le module est défini en tant que module ambiant:

declare module "jquery" {
    export = $;
}

Selon this :

Les déclarations ambiantes sont une promesse que vous faites avec le compilateur . Si ceux-ci n'existent pas au moment de l'exécution et que vous essayez de les utiliser, les choses vont se rompre sans avertissement.

J'espère que ça aide!

25
Marco Maldonado

faire ceci: après avoir installé jquery avec npm ou utilisé avec cdn

premier:  

npm install @types/jquery --save-dev

et après:

importer * comme $ de 'jquery';

3
zahafyou

La solution de Tim utilisant la directive de compilation de référence fonctionne, mais il existe maintenant un moyen plus simple.

Dans tsconfig.json, si vous définissez typeRoots, vous n'avez rien à faire dans vos fichiers .ts. TypeScript fait le travail pour vous.

Comment ça marche?

Dans ma solution, j'insère tous mes @types via npm, donc ceux-ci sont placés à. J'ai également créé quelques types à la main à l'adresse ./@types. 

Dans mon tsconfig.json, j'ai ajouté:

 "compilerOptions": {     
   // lots of other config here
   "typeRoots": [
     "./node_modules/@types",
     "./@types"
   ]
  }

Maintenant, tous mes types sont découverts et utilisés automatiquement par le compilateur, inutile de vous embêter avec les balises de référence!

En conclusion...

Je devrais noter que si vous faites cela et que vous essayez d'importer explicitement jquery, cela échouera et vous serez confus. J'étais bien sûr.

1
Brian MacKay

Essayez de remplacer votre importation par Declare let $: any;

0
Anshu Bansal