使用 clasp 輕鬆使用 TypeScript 開發 Google Apps Script

Sean Chou
Recording everything
4 min readJul 23, 2019

--

https://i.imgur.com/8ylFmgd.png

在開發 Google Apps Script 的時候,雖然檔案放在 Google drive 在線上編輯很方便,但因為線上編輯的 IDE 實在不是很好用,而且又只能用 JavaScript ES5 之前的寫法,再加上如果多人開發要使用 git 版控,還是在 local 開發會比較順手。

因此如果要下載到 local 使用,可以使用 Google 推薦的一個套件 clasp,來下載到 local 來寫,如果不想用 ES5 的寫法,可以用Typescript,在 push code 的時候會自動幫你把 .ts 轉成 .gs file。

Update: 現在 Google Apps Script 已經可以使用 ES6 以上寫法囉

環境準備

開發環境

  • Node.js version 4.7.4 or later
  • npm

下載 clasp

使用 npm 來下載 clasp 的套件

$ npm install @google/clasp -g

使用 TypeScript

這裡使用的 TypeScript,記得要下載 google apps script 使用的

$ npm i -S @types/google-apps-script

使用 Clasp

登入 apps script

首先要使用 clasp 來登入你的 google apps script

$ clasp login

會自動導到 Google account 的登入頁面,確認要開的權限後,就會執行登入,成功之後會出現 success 的訊息

並且在 console 也會有登入成功的訊息

建立新專案

假如是第一次使用,可以直接透過 clasp 來建立一個新專案

$ clasp create [scriptTitle]

使用既有專案

如果已經有既有專案了,可以直接把建立好的 Google Apps Script 專案給抓下來。首先要先去查看既有專案的 script id

檔案 > 專案屬性 > 資訊 > 指令碼 ID (scriptId)

接著就可以使用scriptId來直接把既有專案 clone 下來

$ clasp clone <scriptId>

到這裡就完成,可以開始在 local 環境開發了,之後最主要的指令操作就和使用 git 一樣,透過 pull / push 來下載上傳你的專案。

$ clasp pull$ clasp push 

另外,在第一次操作的時候,可能會遇到沒有 enable App Script API 的錯誤

使用 console 提供的 hint 網址,到 App Script 去打開 API 就可以使用囉。

之後開發完成 .ts 檔案,當你 push 到 Apps Script 的時候,就會自動轉成可執行的 .gs 檔案了!

更多請參考官網:

Clasp: https://developers.google.com/apps-script/guides/clasp

Typescript: https://developers.google.com/apps-script/guides/typescript

如果你覺得這篇文章對你有幫助,歡迎買杯咖啡贊助 ☕️ 謝謝

--

--