---
lang: ja-jp
breaks: true
---
# Visual Studio で TypeScript を使用する 2021-09-04

> Visual Studio で npm パッケージを管理する
> https://docs.microsoft.com/ja-jp/visualstudio/javascript/npm-package-management?view=vs-2019#aspnet-core-projects

> TypeScript コードのコンパイル (ASP.NET Core)
> https://docs.microsoft.com/ja-jp/visualstudio/javascript/compile-typescript-code-nuget

## Node.js をインストールしていない場合は、Node.js Web サイトから LTS バージョンをインストールする

https://nodejs.org/en/download/

## npm サポートをプロジェクトに追加する (`ASP.NET Core`)

> https://docs.microsoft.com/ja-jp/visualstudio/javascript/npm-package-management?view=vs-2019#aspnet-core-projects


{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/jquery": "3.5.6"
  }
}



:::warning
Razorクラスライブラリ `Sdk="Microsoft.NET.Sdk.Razor"`
の場合は、GUIから`npn構成ファイル`を追加できないので以下のコマンドを実行する。

npm init

:::

## 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"
  ]
}

:::info
この設定で、 `scripts` フォルダ配下に *.ts ファイルを作成し保存すると、`wwwroot/js/*` 配下に `*.js` ファイルが作成される。
:::

## Blazor で TypeScript を使用する

### `@types/blazor__javascript-interop` を導入する

> @types/blazor__javascript-interop
> https://www.npmjs.com/package/@types/blazor__javascript-interop

> DefinitelyTyped/DefinitelyTyped
> https://github.com/DefinitelyTyped/DefinitelyTyped
>

npm install --save-dev @types/blazor__javascript-interop

:::info
`DotNet.DotNetObject` が使用できるようになる。
:::

:::info
使い方の例

    _dotnetReference: DotNet.DotNetObject = null;

    constructor(
        dotnetReference: DotNet.DotNetObject,
        numberOfConsecutiveScans: number = null
    ) {
        this._dotnetReference = dotnetReference;
    }

    async callDotNetMethod() {
        await this._dotnetReference.invokeMethodAsync(
            "OnResultRowValuesChanged",
            this._scanResultRowValues
        );
    }

:::

###### tags: `TypeScript` `Visual Studio` `npn` `ASP.NET Core` `Node.js`