概要
Angular2 の TypeScript で jQuery を使いたい場合の手順です。
※あまり使うことはないかもしれませんが使いたくなったことがあったので一応メモとして残しておきます。
環境
- VSCode 1.12.2
- Angular2 4.0.0 かな。。。
- TypeScript 2.1.0
手順
1.jQueryの型定義ファイルをnpmでインストール
> npm install --save @types/jquery
2.以下のインポート文を追加
import { Component, Input } from '@angular/core';
import * as $ from "jquery";
3.VSCode で 以下のように入力した際にコード補完されればOK
$('').~
※通常のjQuery と同様に $ が使用できるようになります。
これで jQuery のプラグインなどの資産が使えるのではないかと思います。
説明が抜けていましたがテンプレートの方で以下のように jQuery を参照していないと駄目なので忘れないように！！
<body>
<my-app><p>Loading ...</p></my-app>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
私の場合 index.html に bootstrapとjQuery を参照しています。
以上