はじめに

少し前にAlexaのスキルを作ってそれっきりだったので、今回スキル開発に手をつけてみました。
しかしこのAlexaのスキルのテンプレートは生のJavaScript（要は型がないもの）しかなかったので自分用にTypeScriptのテンプレートを作ってみました。

材料

今回はHello WorldのテンプレートをベースにTypeScriptに改造しました。このテンプレートのスキルは単純に「こんにちは」等という言葉に対して「ハローワールド」と返すだけの単純なものです。

加えた改造

まずはtypescriptの導入です。

yarn add -D typescript tsc

ここは完全テンプレですが、とりあえず以下でtsconfig.jsonを作ります。

./node_modules/.bin/tsc --init

とりあえずoutDirとrootDirは以下のように指定して、後は特に設定をいじりません。

"outDir": "./lambda/custom"            
"rootDir": "./src"

これで終わっても良かったのですが、ESLintとPrettierがないのが不満だったので入れることにしました。この２つを用いてコードの静的解析と自動補正を有効化します。導入はここを参考にしました。あとは保存時に自動補正をかけるようにvscodeの設定を拡張します。

.vscode\settings.json

{
  "editor.renderControlCharacters": true,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn",
  "eslint.workingDirectories": ["./src"],
  "eslint.validate": [
    "typescript"
  ]
}

editor.formatOnSaveは無効化しておかないとprettierと喧嘩してしまいます！後はついでにhuskyを入れてcommitしたときにeslintとかを走らせてエラーを検出するようにします。導入はここを参考にしながら、こんな感じでpackage.jsonを作成しました。

コードの改造

元のJSのコードをTypeScriptでトランスパイルできるように書き換えました。細かい内容は省略しますが、特に面倒だったのが多言語対応でした。テンプレートのコードではi18nextを使ってaddRequestInterceptorsの中のハンドラーでゴニョゴニョするような実装（説明適当www）をしていましたが、これをTypeScriptで書き換えるのは辛かったのでこんな感じで自作関数に書き換えました。
コード全体はここで公開しているので一部のみを抜粋して、インテントハンドラーはこんな感じで書き換えました。

const HelloWorldIntentHandler: Alexa.RequestHandler = {
  canHandle(handlerInput) {
    return (
      handlerInput.requestEnvelope.request.type === 'IntentRequest' &&
      handlerInput.requestEnvelope.request.intent.name === 'HelloWorldIntent'
    )
  },
  handle(handlerInput) {
    const speakOutput = languageStrings(handlerInput).HELLO_MSG
    return (
      handlerInput.responseBuilder
        .speak(speakOutput)
        .getResponse()
    )
  },
}

元のテンプレートを崩すことなく実装できた気がします。

さいごに

あとはこれをASK CLIでテンプレートとして呼び出したいわけですが、その方法はここを参照することにしました。やっぱりJavaScriptの開発はTypeScriptとESLintがかかせませんね！

自分のためのAlexaテンプレート（ts version）をつくった

はじめに

材料

加えた改造

コードの改造

さいごに