ASP.NET CoreでTypeScriptを使う(続き)
前回の続きでもうちょっとします。
今回はjQueryを導入して、TypeScriptで次のコードを実行できるようにします。
// app.ts $(event => { alert("Hello!"); });
app.tsを上記コードに書き換えてもjQueryを読み込んでいないので動きません。そのまえにエラーも出ていると思います。これらを解消していきます。
Bower構成ファイルを準備する
Bowerを使ってjQueryをプロジェクトにインストールします。npmではできないの?という気もしますし、webpack?Parcel?というツールも耳にしますが正直わからないのでおとなしくBowerを使うことにします。
まずBower 構成ファイル(bower.json)を作りましょう。中身はこんな感じです。
{ "name": "asp.net", "private": true, "dependencies": { "jquery": "3.2.1" } }
ファイルを保存して少し待つと、wwwrootフォルダの中にlib/jquery/フォルダができます。フォルダの中にたくさんファイルがありますが、jQueryのjsファイルはここにあります。
wwwroot/lib/jquery/dist/jquery.js
Index.cshtmlでjQueryを読み込む
Index.cshtmlにscript要素を追加して、src属性でjquery.jsを指定しましょう。<script src="~/lib/jquery/dist/jquery.js"></script>
の部分ですね。
@page @model WebApp.Pages.IndexModel @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <h1>Hello!</h1> @* jQueryを読み込む *@ <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/js/app.js"></script> </body> </html>
TypeScriptの定義ファイルを使う
app.tsのエラーを回避するためにTypeScriptの定義ファイルを使います。npmを使ってインストールするといいみたいです。package.jsonに"@types/jquery": "3.2.16"
を足します。
{ "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "@types/jquery": "3.2.16", "gulp": "3.9.1" } }
ファイルを保存して少し待つと、node_modulesフォルダにインストールされます。TypeScriptのエラーも消えるはずです。消えない場合はソリューションを開き直すといいかもしれません。
デバッグ実行するとalertが表示されます。
目標クリア。