Google Apps Script 「clasp」を用いてローカル環境からTypeScriptで開発

GAS（Google Apps Script）は、通常 Apps Scriptのエディターを用いて開発する

これでも開発は可能だが、やはり「いつもの使い慣れた環境で開発したい！」という人は
claspを使うと幸せになれる

実行環境

npmが必要、なければnvmやnodebrew等でインストールしておく

$ npm -v
10.2.4

claspの設定

事前に、Apps Scriptの設定にてGoogle Apps Script APIをオンにする

claspをローカル環境にインストール

$ npm install -g @google/clasp

claspのバージョン確認

$ clasp -v   
2.4.2

TypeScripの型定義ファイルのインストール

$ npm init -y
$ npm i -D @types/google-apps-script

tsconfig.jsonを作成

{
  "compilerOptions": {
    "lib": ["esnext"],
    "experimentalDecorators": true
  }
}

claspにログインする

clasp loginを実行すると、ブラウザが開く

$ clasp login
Logging in globally…
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https...

claspでのログインを許可すると、以下のメッセージがブラウザで表示される

Logged in! You may close this page.

TypeScriptでプロジェクトを作成する

clasp createコマンドを実行する

$ clasp create --type standalone

.clasp.json、appsscript.json等の設定ファイルが作成される

.clasp.jsonのscriptIdがGASのプロジェクトID

{"scriptId":"...","rootDir":"C:\\Users\\user\\Documents\\example-gas-ts"}

appsscript.jsonの初期タイムゾーンはAmerica/New_Yorkとなっている

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

.tsファイルを作成する

const greeter = (person: string) => {
  return `Hello, ${person}!`;
}

function testGreeter() {
  const user = 'Grant';
  Logger.log(greeter(user));
}

プロジェクトをApps Scriptに反映させる

clasp pushで先ほど作成した.tsがGASに反映される

$ clasp push

--watchオプションを付与すると、ファイルの変更を監視してコンパイル・アップロードされる

clasp openでブラウザでGASの画面を表示できる

$ clasp open

.tsは.gsに変換され、プロジェクトに反映される

// Compiled using insight-gas-ts 1.0.0 (TypeScript 4.9.5)
"use strict";
var greeter = function (person) {
    return "Hello, ".concat(person, "!");
};
function testGreeter() {
    var user = 'Grant';
    Logger.log(greeter(user));
}

既存のプロジェクトをpullする

clasp cloneで作成済みのプロおジェクトを使用できる

clasp clone {プロジェクトID}