【RPGツクールMV】プラグインの開発環境でTypeScriptを使う

RPGツクールMVのプラグインの開発環境でTypeScriptを使いたい！

概要

今回の記事では、RPGツクールMVのプラグインの開発環境でTypeScriptを使う手順を掲載する。

仕様書

環境

RPGツクールMV 1.6.3

手順書

私の環境では参考にさせて頂いた記事のとおりではうまく動かなかったので、多少設定を変更してる。

例としてtest-pluginというディレクトリーにプロジェクトを作る。ディレクトリーの中で下記のコマンドを実行して、プロジェクトの設定、必要なパッケージのインストール等を行う。

npm init
npm install -D typescript cpx
npm install rpgmakermv_typescript_dts
npx tsc --init

参考にさせて頂いた記事に従ってパッケージrpgmakermv_typescript_dtsから型宣言のファイルをコピーする。

copy node_modules\rpgmakermv_typescript_dts\typings\rpgmakermv\rpgmakermv.d.ts @types\rpgmakermv.d.ts

コピーした@types\rpgmakermv.d.tsを編集する。元々のdeclareを全て削除してdeclare global {と}で括る。ファイルの末尾にexport { }を追加する。

/// <reference types="pixi-tilemap" />

declare global {
    ...
}

export { }

プロジェクトのディレクトリー直感のtsconfig.jsonを編集する。私の環境ではincludeの設定を追加する必要があった。

{
  "compilerOptions": {
    "target": "es2018",
    "module": "ESNext",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strictPropertyInitialization": false,
    "strictBindCallApply": false,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src",
    "@types/**/*.d.ts"
  ]
}

プロジェクトのディレクトリー直感のpackage.jsonを編集する。

{
  ...
  "scripts": {
    "build": "tsc",
    ...
  },
  ...
}

npm run buildでtsがjsにコンパイルされるようになる。

プラグインがコンパイルされたらゲームのプロジェクトのプラグインのディレクトリーにコピーするコマンドも作る。

プラグインとゲームのプロジェクトがこんな感じに配置されてるとする。

plugins
    test-plugin
        package.json
        ...
projects
    test-project
        js
            plugins

{
  ...
  "scripts": {
    "build": "tsc",
    "deploy": "tsc && cpx \"dist/**\" ./../../projects/test-project/js/plugins",
    ...
  },
  ...
}

npm run deployでコンパイルが実行された後、出力されたjsファイルがゲームのプロジェクトのプラグインを配置するディレクトリーの中にコピーされる。

まとめ（感想文）

複雑になりがちなゲーム開発こそ型を使いたいと思う今日この頃。

参考文献・引用

下記の記事を参考にさせて頂きました。ありがとうございました。

RPGツクールMVのプラグインをTypeScriptで開発する（令和版） - Qiita

同様の記事はたくさんあるのだが、微妙に情報が古かったりして四苦八苦したので、自分なりに良いと思った方法を共有する。Win?