[Google Apps Script] Using TypeScript in a Clasp Project

公開日: 2019/07/31

TypeScript を clasp プロジェクトで利用します。

インストール

@types/google-apps-script を利用します。

% yarn global add @google/clasp
% yarn add @types/google-apps-script
% clasp --version
2.2.1

clasp create か clasp clone でプロジェクトファイルを用意します。

ファイル拡張子を .ts に変更します。

% mv Code.js Code.ts

ファイル構成は下記のようになっています。

.
├── Code.ts
├── appsscript.json
├── node_modules
├── package.json
└── yarn.lock

1 directory, 4 files

clasp push だけでトランスパイルされる

Code.ts の内容をサンプルコードに書き換えます。

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

function myFunction() {
  let user = "Grant";
  Logger.log(greeter(user));
}

clasp push を実行します。
ブラウザ上のスクリプトエディタを確認するとトランスパイルされた結果が表示されます。

Code.gs
// Compiled using ts2gas 3.4.4 (TypeScript 3.5.3)
var exports = exports || {};
var module = module || { exports: exports };
var greeter = function (person) {
    return "Hello, " + person + "!";
};
function myFunction() {
    var user = "Grant";
    Logger.log(greeter(user));
}

clasp push --watch オプションを利用すると、ファイルの変更を検知して自動で clasp push してくれます。

補遺

TypeScript

TypeScript on ESLint