2021/10/17 追記

新しく記事を書きました。

はじめに

GAS開発をTypeScriptで行い、ESLint, Prettierを使用するためにやることを書いていきます。

GASプロジェクトの作成

https://script.google.com/home
スプレッドシートの ツール＞スクリプトエディタ から作成

開発環境の構築

claspのダウンロード

https://github.com/google/clasp#install
ローカルで開発しやすくするためのツール

GASのファイルをローカルに

先ほど作成したGASプロジェクトにアクセスし、ファイル＞プロジェクトのプロパティを開き、スクリプトIDをコピー
GASからローカルにファイルを持ってくる

clasp clone **スクリプトID**

コード.js
appscript.json
.clasp.json

がダウンロードされる。
以下の変更を加える

コード.jsをAA_main.tsにリネーム
- AA_とつけるのは、GASエディタ上で一番最初に表示されるように（もっといい方法があるのかもしれませんが。。）
- 開発はTypeScriptで行います
srcディレクトリの作成
AA_main.ts, appsscript.jsonをsrc下に移動
.clasp.jsonの書き換え

{
    "scriptId":"スクリプトID",
    "rootDir": "./src"
}

ESLint,Prettier等インストール

yarn add -D @types/google-apps-script eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

`tsconfg.json`の作成

echo '{
  "compilerOptions": {
    "lib": ["esnext"],
    "strict": true,
  },
  "include": ["src"]
}' > tsconfig.json

eslint, prettierの設定ファイルの作成

# pretier
echo '{\n\t"printWidth": 120\n}' > .prettierrc

# eslint
./node_modules/.bin/eslint --init

prettierと組み合わせるため、作成されたeslintrc.jsonを編集

"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" //これを追加
]

アップロードできるかテスト

AA_main.tsを書き換え

AA_main.ts

const main = () => {
  console.log("hello");
};

プッシュ

clasp push

スクリプトエディタにアクセスし、ログに出力されるかを確認

おわりに

これでローカルでGASをTypeScriptでいい感じに開発することでが出来るようなりました！

【始め方】GAS(TypeScript) プロジェクト開発時にやること