GAS を書くときに TypeScript を使えるようになったって話は昨年くらいにキャッチアップしていたんだけど、プライベートで GAS をやるまでの気力はなく、仕事でも特に書くことはなかったので完全に放置していた。
最近ようやく仕事で GAS を書く機会に恵まれた（実際は GAS である必要は全くないけど）ので、GAS × TypeScript をお試ししてみた。
参考リンク
以下の記事を参考にさせてもらった。
環境整備
上記のリンクを読んだ感じ、 node の環境があれば動きそうなだったので、Dockerfileと、
FROM node
RUN apt-get -y install \
git \
curl
WORKDIR /app
docker-compose.yamlを準備した。
version: "3"
services:
app:
build: ./docker/node
image: ts4gas_image
container_name: ts4gas_container
tty: true
volumes:
- .:/app
プロジェクト初期化
Docker を上げて初期化、必要なものを入れていく。
$ npm init -y
$ npm install @google/clasp tslint -D
$ npm install @types/google-apps-script -S
$ npx tslint --init
.gitignoreはgiboでパッと作る（これはホスト上で）。
$ gibo dump node >> .gitignore
clasp コマンド
clasp とかいうのは今までに使ったことがないので、コマンドを見ておく。
--helpを叩くと、色々とコマンドがある様子。参考リンクだと特にやってなかったけど、多分ログインした方がいい気がするので、ログインからやっていく（後続でエラーで弾かれるので、apis enableも先に叩いておくが吉）。
$ npx clasp --help
Usage: clasp <command> [options]
clasp - The Apps Script CLI
Options:
-v, --version
-h, --help output usage information
Commands:
login [options] Log in to script.google.com
logout Log out
create [options] Create a script
clone [options] [scriptId] [versionNumber] Clone a project
pull [options] Fetch a remote project
push [options] Update the remote project
status [options] Lists files that will be pushed by clasp
open [options] [scriptId] Open a script
deployments List deployment ids of a script
deploy [options] Deploy a project
undeploy [options] [deploymentId] Undeploy a deployment of a project
version [description] Creates an immutable version of the script
versions List versions of a script
list List App Scripts projects
logs [options] Shows the StackDriver logs
run [options] [functionName] Run a function in your Apps Scripts project
apis [options] List, enable, or disable APIs
list
enable <api>
disable <api>
help Display help
setting|settings [settingKey] [newValue] Update <settingKey> in .clasp.json
* Any other command is not supported
ログイン、プロジェクト作成
Docker 上からのログインなので、--no-localhostを付けてやる。
--no-localhostを付けなかったらログイン後に localhost にリダイレクトされるが、その際のポートがバラバラなようで、EXPOSE で開けれなさそうだった。
--no-localhost付きで実行したら、Auth 後にトークンが発行されるので、それをコピペする。
$ npx clasp login --no-localhost
Enter the code from that page here:
Default credentials saved to: ~/.clasprc.json (/root/.clasprc.json).
成功したら credential ファイルが出来上がる。
ただ、この credential ファイルは HOME ディレクトリ配下に生成されるので、Docker だとちょっと扱いづらい。解決策が思い浮かばないので、放置。
で、ここまで来たら create する。が、ここでいくつか注意点。
$ npx clasp create ts4gas --rootDir ./src
? Clone which script? sheets
Created new Google Sheet:
User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
まず 1 点目として、--rootDirしても効いてないように見える。なので、リンク先にあるように手動で src ディレクトリを切ってファイルを動かしてやる必要がある。バグなのか、指定方法が悪いのかは不明。
2 点目は、API の有効化を先にしとかないといけない様子。権限は付与してるんだから、CLI で一緒にやってくれればいいのに。
とりあえずリンク先にあるように pull して src ディレクトリに移動させていく。
$ npx clasp pull
あとはサンプルコードを貼り付けて push。試しに linter にかけたらエラーが出たのでとりあえず見なかったことにする。
$ npx clasp push
# -wオプションで、変更時に自動でpushすることも可能
$ npx clasp push -w
なお、対象のディレクトリは open で開くことができる。
$ npx clasp open
おわりに
ここまで出来れば、TypeScript のお作法はあるだろうけど、そんなにコストかけずに実装できそうな感覚はある。
ただ TypeScript は型がいいって話と型定義ファイルが面倒って話を両方聞くので、実際問題、使い勝手としてはどうなんだろうね。
なにはともあれ、こんにちは TypeScript！