【GAS】TypescriptでGAS開発環境を整える

導入

GAS開発の話が出たため、せっかくなのでTypeScriptを使用して開発する事にしました。
環境構築時に、詰まったポイントをまとめます。

TypeScriptについてあまり知識がないため、GASやclaspの話というよりTypeScriptの基本の話です。

環境

Visual Studio Code： 1.105.1
TypeScript： ^5.9.3
clasp： 3.1.0

最終的なディレクトリ構成

プロジェクト
├── dist
│   └── appsscript.json
├── node_modules
├── src
│   ├── App.ts　// ここにロジックを書いていく
│   └── main.ts
├── .clasp.json
├── esbuild.js
├── package-lock.json
├── package.json
└── tsconfig.json

構築手順

1. 環境準備
   Node.js と npm をインストールし、@google/clasp をグローバル導入する

2. プロジェクト作成
   任意のフォルダを作成し、npm init -y で初期化する

3. 必要パッケージ導入
   TypeScript・型定義・ビルドツールを導入する

   npm install -D typescript @types/google-apps-script esbuild esbuild-gas-plugin
   

4. TypeScript 設定
   npx tsc --init で tsconfig.json を生成し、以下を調整する。

   {
     "compilerOptions": {
       "lib": ["esnext"],
       "experimentalDecorators": true
     },
     "include": ["./src"]
   }
   

5. ビルドスクリプト作成
   esbuild.js を作成し、src/main.ts を dist/main.js にバンドル出力する設定を書く

6. GAS プロジェクト作成
   Google Apps Script に対して、プロジェクトを作成する

   clasp login
   clasp create --type standalone --title "ProjectName"
   

7. フォルダ構成調整

   • dist フォルダを作成。
   • .clasp.json の "rootDir": "./dist" に変更。
   • appsscript.json を dist に移動。

8. package.json 編集

   {
     "type": "module",
     "scripts": {
       "build": "node esbuild.js",
       "push": "clasp push",
       "open": "clasp open",
       "deploy": "npm run build && npm run push"
     }
   }
   

9. TypeScript ソース作成

   • src/App.ts にロジックを記述。
   • src/main.ts にエントリーポイントを定義して global に登録。

10. ビルド & デプロイ

    npm run deploy
    

    で TypeScript をビルドして GAS にプッシュ。
    npm run open でブラウザからプロジェクトを開く。

詰まったポイント

clasp createに失敗する

$ clasp create --type standalone --title "gas-ts-probe"

request to https://script.googleapis.com/v1/projects failed, reason: getaddrinfo ENOTFOUND script.googleapis.com

外出先でモバイル回線から行っており、接続が不安定だったことが原因でした。

'console'が見つかりません

tsconfig.jsonのlibプロパティの要素に"dom"を追加

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2019", "dom"],
  },
}

相対インポートエラー

import { App } from "./App";

エラー内容

'App' が宣言されていますが、その値が読み取られることはありません。ts(6133)

直接的な原因はtsconfig.jsonでした

tsconfig.json

{
    "compilerOptions": {
    // "module": "nodenext", // 変更前
    "module": "commonjs",
    // "target": "esnext", // 変更前
    "target": "es2019",
    "moduleResolution": "node", // 追加
    // "verbatimModuleSyntax": true, // コメントアウト
    }
}

変更点
moduleプロパティをnodenextからcommonjsに修正
"moduleResolution":"node"を追加
"verbatimModuleSyntax": trueをコメントアウト（削除）

clasp openが使えない

clasp openはv3系以前のもので、v3.x以降は、分割されています。

以下が対応表です。

旧コマンド / オプション	v3（新）コマンド	説明
clasp open	clasp open-script	従来のスクリプトエディタを開く動作（標準の edit ページ）。
clasp open --webapp / clasp open --webapp [scriptId]	clasp open-web-app	Web アプリ（公開 URL / デプロイ管理）関連ページを開く。
clasp open --creds	clasp open-credentials-setup	GCP／OAuth クレデンシャル作成ページなど、認証設定関連の案内を開く。v3 ではクレデンシャル管理が強化されている。
（旧に無い）clasp open-container	clasp open-container	コンテナ（もしあれば）／関連リソースを開く。v3 の新しい分類の一つ。

おそらく参考にした情報とTypeScriptのバージョンが異なっていたからだと思いますが、根本的な部分や詳細については必要に応じてまとめようと思います。

完成

参考