ページ

2018年9月24日月曜日

GASをclasp+typescriptで実装してみる

概要

  • claspがtypescriptサポートした 🎉
  • 筆者がエディッタをVSCodeに乗り換えたので試したい!
  • claspをもう少し詳しく触ってみる

環境

折角なので一から環境作ってみる
$ node -v
v9.5.0

$ npm i @google/clasp -g
古い環境をいったんログアウト
$ clasp logout
※この時古い~/.clasprc.jsonは削除された
再度ログイン
$ clasp login
どのアカウントでログインされているか分からない場合、
$ clasp list
で直近5件分のプロジェクトが表示される

簡単なサンプル作成

$ mkdir ts-sample
$ cd ts-sample
$ clasp create ts-sample
※この時Google Apps Script APIが無効になっていると以下エラーが出る。
Error: Permission denied. Enable the Apps Script API:
https://script.google.com/home/usersettings
表示されているURLへいきGoogle Apps Script APIを有効にする
image.png (25.3 kB)

その後pull
$ clasp pull
必要なパッケージをインストール
$  yarn add typescript @types/google-apps-script
$ yarn add tslint --dev
$ ./node_modules/.bin/tslint --init
.clasp.jsonrootDirを追加
josn
{
  "scriptId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "rootDir": "src"
}
シンプルにアラートが表示される

push

以下のコマンドでjsへトランスパイルしpushしてくれます。便利!
$ clasp push

エラー

実行時に以下のエラーが表示された場合
image.png (146.4 kB)
「詳細」を開いて、承認を行えばOK
image.png (98.2 kB)