ASP.NET CoreでTypeScriptを使う（続き）

asp.net-core typescript

前回の続きでもうちょっとします。

ichiroku11.hatenablog.jp

今回は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が表示されます。

目標クリア。

参考