web-dev-qa-db-ja.com

JQueryをTypeScriptファイルにインポートする方法は？

更新

インポートは不要です。代わりに、ファイルの先頭に参照を追加する必要がありました。したがって、私のWebAPI.jsの最初の行は/// <reference path ="../typings/jquery/jquery.d.ts"/>ではなくimport { $ } from '../jquery-3.1.1';になっているはずです

TypeQueryファイルで使用するjQueryをインポートしようとしていますが、試行するすべてのことでさまざまなエラーが発生します。私は解決策 here および here に従いましたが、運はありませんでした。

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

import * as $ from '../jquery.3.1.1'も試しました

エラー

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

インポートは不要です。代わりに、ファイルの先頭にTypeScript定義ファイルへの参照を追加します。したがって、WebAPI.jsの最初の行は

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

の代わりに

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

DefinitelyTyped wikiによると：

TypeScript宣言ファイルは、外部のサードパーティJavaScriptライブラリのタイプ、関数、およびパラメーターを定義する方法です。 TypeScriptコードで宣言ファイルを使用すると、使用している外部ライブラリに対してIntellisenseとタイプチェックが有効になります。

jquery.d.tsは、GitHubにある DefinitelyTyped Library の一部です。 NuGetパッケージマネージャーを使用して、Definitely TypedをVisual Studioプロジェクトに含めることができます。

18
Tim Hutchison

TypeScriptの ドキュメント および jqueryの定義ファイル に従って、import * as $ from "jquery";としてインポートする必要があります。モジュールはアンビエントモジュールとして定義されます。

declare module "jquery" {
    export = $;
}

this によると：

アンビエント宣言は、コンパイラで作成することを約束します。これらが実行時に存在せず、使用しようとすると、警告なしに問題が発生します。

それが役に立てば幸い！

30
Marco Maldonado

do this： npmでjqueryをインストールした後、またはcdnで使用した後

最初：

npm install @types/jquery --save-dev

およびその後：

import * as $ as 'jquery';

11
zahafyou

参照コンパイラディレクティブを使用したティムのソリューションは機能しますが、より簡単な方法があります。

Tsconfig.jsonでは、typeRootsを設定する場合、.tsファイルで何もする必要はありません。 TypeScriptが作業を行います。

どのように機能しますか？

私のソリューションでは、すべての@typeをnpm経由でプルするため、これらは./node_modules/@typesに配置されます。また、。/ @ typesで手作業で作成したタイプもいくつかあります。

Tsconfig.jsonに、次を追加しました。

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

これで、すべてのタイプがコンパイラーによって自動的に検出および使用されるため、参照タグに煩わされる必要はありません！

結論...

これを行い、明示的にjqueryをインポートしようとすると失敗し、混乱することに注意してください。そうだった。

1
Brian MacKay

インポートをdeclare let $：anyに置き換えてみてください。

0
Anshu Bansal