TypeScriptでjQueryを使用する方法

やっています

$(function(){ 
    alert('Hello'); 
});

Visual Studioでこのエラーが表示されています：(TS) Cannot find name '$'.。TypeScriptでjQueryを使用するにはどうすればよいですか？

ほとんどの場合、jQuery用のTypeScript宣言ファイルをダウンロードしてjquery.d.ts、プロジェクトに含める必要があります。

オプション1：@typesパッケージをインストールします（TS 2.0+に推奨）

package.jsonファイルと同じフォルダーで、次のコマンドを実行します。

npm install --save-dev @types/jquery

次に、コンパイラーはjqueryの定義を自動的に解決します。

オプション2：手動でダウンロードする（非推奨）

こちらからダウンロードしてください。

オプション3：タイピングを使用する（Pre TS 2.0）

タイピングを使用している場合は、次のように含めることができます。

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

定義ファイルを設定した後$、目的のTypeScriptファイルにエイリアス（）をインポートして、通常どおりに使用します。

import $ from "jquery";
// or
import $ = require("jquery");

tsconfig.jsonで--allowSyntheticDefaultImports-addを使用"allowSyntheticDefaultImports": trueしてコンパイルする必要がある場合があります。

パッケージもインストールしますか？

jqueryがインストールされていない場合は、おそらくnpmを介して依存関係としてインストールする必要があります（ただし、常にそうであるとは限りません）。

npm install --save jquery

私の場合、これをしなければなりませんでした

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

次に、スクリプトファイルで A.ts

import * as $ from "jquery";
... jquery code ...

FOR Visual Studioのコード

私にとってうまくいくのは、index.htmlの<script>タグを介して標準のJQueryライブラリを確実にロードすることです。

走る

npm install --save @types/jquery

JQuery $関数がすべての.tsファイルで使用できるようになりました。他のインポートは必要ありません。

私はあなたがJQueryのためにTypescriptタイピングを必要とするかもしれないと信じています。Visual Studioを使用していると言ったので、Nugetを使用して取得できます。

https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

Nuget Package Manager Consoleのコマンドは

Install-Package jquery.TypeScript.DefinitelyTyped

更新：コメントに記載されているように、このパッケージは2016年以降更新されていません。ただし、https：//github.com/DefinitelyTyped/DefinitelyTypedの Githubページにアクセスして、タイプをダウンロードできます。ライブラリのフォルダーに移動し、index.d.tsそこにファイルをダウンロードします。それをプロジェクトディレクトリの任意の場所にポップすると、VSはすぐにそれを使用する必要があります。

Angular CLI V7の場合

npm install jquery --save
npm install @types/jquery --save

jqueryがangular.json->スクリプトにエントリがあることを確認してください

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

tsconfig.app.jsonに移動し、「types」にエントリを追加します

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

アップデート2019：

Davidの回答はより正確です。

Typescriptは、DefinitelyTyped Repoを使用して、ライブラリ開発にTypescriptを使用しないサードパーティベンダーライブラリをサポートしています。

これらのタイプのタイプチェックでtsLintがオンの場合、コンポーネントでjquery/ を宣言する必要があり$ます。

たとえば

declare var jquery: any;
declare var $: any;

Webアプリケーション（Reactなど）でjqueryを使用したい場合、jqueryはすでにロードされています <script src="jquery-3.3.1.js"...

ウェブページでできること：

npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

したがって、jqueryをもう一度（でnpm install --save jquery）ロードする必要はありませんが、Typescriptのすべての利点があります。

TypeScriptとjQueryの構成手順は次のとおりです。

これにより、jQueryの型サポートは、インターネットにあるほとんどの記事よりもうまく機能します。（ 私は信じている。 ）

最初：

npm install jquery --save
npm install @types/jquery --save-dev

2番目（非常に非常に非常に重要！！！）：

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

その後、あなたはそれを楽しむことができます：

$(document).ready(function () {
    $('btn').click(function () {
       alert('I am clicked !')
    }
}

さらっとしたなめらかさ!!!

Angularバージョン9での現在と今日のこの作業

1. これをnpm経由でインストールします：npm i @ types / jqueryは--saveを追加するだけでグローバルにセットアップします
2. tsconfig.app.jsonに移動し、配列 "types" jqueryに追加します。
3. ngサーブと完了。

これは私にとってはうまくいきます：

export var jQuery: any = window["jQuery"];