新・GASをTypeScriptで使う方法
最近 (2025頃?) の clasp のアップデートの関係で従来の方法だと うまくできなくなっていたので整理し直しました。
clasp の導入 (初回のみ)〜ログイン
Google の GAS 関連ツール clasp をインストールします。 そして clasp を使うために GAS プロジェクトを開発するアカウントの ログイン状態を紐づけます。
$ npm install -g @google/clasp # お使いの環境に応じて sudo で。
$ clasp login
... # ブラウザ等で認証
You are logged in as ***.
プロジェクト作成〜ローカルにclone
clasp でプロジェクトを開始する方法もあるのですが、ぼくの使い方では Google Workspace のドキュメントから作る方が多いのでそっちだけで 説明します。
まず Sheets なりなんなりで拡張機能 > Apps Script としてふつうに GAS プロジェクトを開始します。で、歯車のアイコンで設定を開き、 スクリプトIDをコピーします。そしたらプロジェクトを clone。 同時にローカルに開発ようのディレクトリを作ります。 そのディレクトリに入って clasp clone。そしてGASよう typescript 各種定義もインストールします。
$ mkdir my-app # プロジェクトフォルダ作成
$ cd my-app
$ clasp clone {script ID} # クラウドからクローン
└─ appsscript.json
└─ コード.js # このファイルは不要
Cloned 2 files.
$ npm install --save-dev typescript @types/google-apps-script
added 2 package in 1s
コード.jsはいらないので消しちゃいましょう。
と、ここまでは適当に検索したりAIに聞いたりすればわかる話。この先がこの記事をまとめた理由で、ちょっと小細工が必要です。
tsconfig.json の編集
npx tsc --init で tsconfig.json を作ります。
$ npx tsc --init
できあがったtsconfig.json を以下のように編集します。
// (前略)
"rootDir": "./src", // コメントアウトをはずす
"outDir": "./dist", // コメントアウトをはずす
// (中略)
"module": "none", // nodenext を none にする
"ignoreDeprecations": "6.0", // "module": "none" なのでこれが必要
// (中略)
"types": ["google-apps-script"],
// (中略)
// "moduleDetection": "force", // コメントアウトする
// (以下省略)
ビルド〜push
src フォルダを作って、その中に main.ts などの名前でコードを書きます。
でき上がったら tsc でトランスパイルして clasp push すれば ok です。
$ mkdir src
$ vi src/main.ts # コードは src に書く
$ npx tsc # .ts が .js になって dist に置かれる
$ ls dist
main.d.ts main.d.ts.map main.js main.js.map # `main.js` ができてればok
$ clasp push # .js がクラウドに push される
push の際に manifest だの appscript.json だの言われたら cp appscript.json dist とすれば ok です。
以降は (コード編集 > npx tsc > clasp push) のサイクルになります。