---
lang: ja-jp
breaks: true
---
# Blazor で手っ取り早くTypeScriptを使用する 2025-02-27

* テンプレートから作成した基本的な構成からTypeScriptを導入する
* この例では、作成した JavaScript を TypeScript に変更することを想定。

## `tsconfig.json`

* プロジェクトの直下に以下の内容で`tsconfig.json`ファイルを作成する。

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es2022",
    "moduleResolution": "Node"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

:::info
`トリプルスラッシュディレクティブ`で型定義をインポートする場合は、以下のようになる。

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es2022",
    "moduleResolution": "Node",
    "allowUmdGlobalAccess": true,  // UMDグローバル変数へのアクセスを許可
    "module": "es2022" // モジュールシステムを明示的に指定
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

:::

## `package.json`

* プロジェクトの直下に以下の内容で`package.json`ファイルを作成する。
* `@types/fabric`を使用する場合の例。

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "replace": "gulp replace-code"
  },
  "devDependencies": {
    "@types/blazor__javascript-interop": "^3.1.7",
    "@types/node": "^22.13.10",
    "gulp": "^5.0.0",
    "gulp-replace": "^1.1.4",
    "@types/fabric": "^5.3.10"
  }
}

:::info
`トリプルスラッシュディレクティブ`で型定義をインポートする場合は、`scripts.replace`、`gulp`、`gulp-replace` は不要です。
:::

## `gulpfile.js`

:::warning
`トリプルスラッシュディレクティブ`で型定義をインポートする場合 `gulpfile.js`ファイルは不要です。
:::

* プロジェクトの直下に以下の内容で`gulpfile.js`ファイルを作成する。
* `@types/fabric`を使用する場合の例。
* JavaScriptに`import { fabric } from 'fabric';`が あるとエラーになるので削除する。

const gulp = require("gulp");
const replace = require('gulp-replace');

gulp.task('replace-code', done => {

    gulp.src(['Components/Pages/Home.razor.js'], { "allowEmpty": true })
        .pipe(replace("import { fabric } from 'fabric';", ""))
        .pipe(gulp.dest('Components/Pages/'));

    done();
});

## `*.csproj`

* `*.csproj`に以下を追加する。

	<ItemGroup>
		<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.7.3">
			<PrivateAssets>all</PrivateAssets>
			<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
		</PackageReference>
	</ItemGroup>

	<Target Name="BeforeTargetsPostBuildEvent" BeforeTargets="PostBuildEvent">
		<Exec Command="npm run replace" WorkingDirectory="$(ProjectDir)" />
	</Target>

:::info
`トリプルスラッシュディレクティブ`で型定義をインポートする場合 `Target` 部分は不要です。
:::

## `npm install`

* カレントディレクトリをプロジェクトフォルダに変更して、`npm install` コマンドを実行する。

> npm install

added 160 packages, and audited 161 packages in 1s

16 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

* `Sdk="Microsoft.NET.Sdk.Web"` プロジェクトの場合は以下のようになる。

## TypeScriptファイルを準備する。


:::info
`トリプルスラッシュディレクティブ`で型定義をインポートする場合の例

// fabricの型定義をimport (TypeScriptのコンパイラが自動的に@types/fabricを解決します)
/// <reference types="fabric" />

// fabricライブラリの型定義を拡張
declare module 'fabric/fabric-impl' {
  export interface Canvas {
    wrapperEl: HTMLElement;
  }
}
・・・

:::

###### tags: `Blazor` `TypeScript` `gulp` `トリプルスラッシュディレクティブ` `UMDグローバル`