TypeScriptでdiscordのbotを作る

はじめに

なぜかQiitaの記事でTypeScriptを使ってdiscordのbotを作る記事が無かったので簡単にですがまとめます
TypeScript使いでyarn分からないなんて人いないと思うのでyarn使っていきます
**と"う"し"て"n"p"m"つ"か"わ"な"い"の"お"お"お"**っていう方は適宜ご自身で補完してください

あと、この記事内ではbotのデプロイや、トークンの発行などには触れません。あくまでTypeScriptで作れるようにしようねーっていう目的なので最小限にいきましょい
トークンの発行についてはこの記事とか参考にすればinじゃねーの？

Node環境の準備とか諸々のインストールとか

開発やるディレクトリでターミナル開いて

$ yarn init

で適当にpackage.json作ったら

$ yarn add -D typescript ts-node @types/node

でTypeScript関連のやつを入れてーの

$ yarn add discord.js

でdiscord.jsも入れておきます。型定義はオールインワンっぽいから別で入れるとかはしなくておっけー

tsconfig.jsonの設定

touch tsconfig.jsonでもtsc --initでもなんでもいいから適当にtsconfig.json作って

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "ESNext",
        "module": "CommonJS",
        "outDir": "./build",
        "rootDir": "./src",
        "removeComments": true,
        "strict": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "pretty": true,
        "newLine": "CRLF"
    }
}

適当にこんな感じに仕上げておけばいいんじゃないですかね？"exclude"とか"include"とかは無くて大丈夫でした。
"outDir"とか"rootDir"の設定が気に入らなかったらお好みでジャンジャン変えちゃってください

package.jsonのスクリプト部分の設定

ts-nodeを使うテスト用の実行コマンド、本番環境で使う用の実行コマンド、本番環境用にコンパイルする用の3つのスクリプトは最低でも用意するといいと思いますです

package.json

    /**** 省略 ****/

    "scripts": {
        "start": "node ./build/index.js",
        "debug": "ts-node ./src/index.ts",
        "compile": "tsc -p .",
        "compile:test": "tsc -p . --noEmit"
    },

    /**** 省略 ****/

これさえあれば

$ yarn debug

でテスト環境内で実行できて、

$ yarn compile

でコンパイルして、

$ npm run start

で本番環境レッツゴーできるようになるわけですね。本番はyarnなさそうだったらyarn使わないでおこうね〜
"compile:test"はビルド後のファイルが出力されずにコンパイルできるやつです。一応用意しておこう

一応注意点として、本番環境では$ yarn debugするとエラーになっちゃうんで、ちゃんと$ yarn compileでコンパイルして$ npm run startするようにしましょう。

以上で準備完了です。あとはsrc/index.tsからどんどんbot作っていきましょう！

例

以上を踏まえると、ディレクトリ構造はこんな感じになります。

ディレクトリ構造

  ┠ build
  ┃  ┗ index.js
  ┃
  ┠ src
  ┃  ┗ index.ts
  ┃
  ┠ package.json
  ┗ tsconfig.json

んで、簡易的にindex.tsを作ると

index.ts

import { Client } from 'discord.js';

const client = new Client();
const TOKEN = 'botくんのトークンをここに入れんだよ！';

client.on('message', (message) => {
    if (message.author.bot) {
        return;
    }
    if (message.content === 'おはよう') {
        message.channel.send('おっはー');
    }
});

client.login(TOKEN);

こんな感じになって、
からの$ yarn debugしてbotくんのいる鯖で「おはよう」って言ってみると

ちゃんとおっはーって返してくれてますね

ていうかデモで用意したコードにTypeScriptの要素何も無くてワロタ

それでは〜

参考

discord.js TypeScript テンプレート
tsconfig.jsonの全オプションを理解する（随時追加中）