---
lang: ja-jp
breaks: true
---
# ASP.NET Core で TypeScriptを使う Visual Studio　2021-05-11

> チュートリアル: Visual Studio での TypeScript を使用した ASP.NET Core アプリの作成
> https://docs.microsoft.com/ja-jp/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019

## `ASP.NET Core Webアプリ MVC` プロジェクトを作成


## NuGet パッケージ `Microsoft.TypeScript.MSBuild` の追加


## `TypeScript JSON 構成ファイル` を追加

`tsconfig.json` ファイルを追加します。


{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

## scripts/app.ts ファイルを追加


function TSButton() {
    let name: string = "Fred";
    document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
    fullName: string;
    constructor(
        public firstName     : string,
        public middleInitial : string,
        public lastName      : string
    ) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

保存すると、`outDir` で指定した、`wwwroot/js/app.js` ファイルが生成される。


## Views/Home フォルダーを開き、Index.cshtml を変更

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

## Views/Shared フォルダーを開き、 _Layout.cshtml を変更

・・・
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/js/app.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

## 実行確認


###### tags: `ASP.NET Core` `TypeScript` `Visual Studio`