TypescriptでGoogle Apps Script開発をする

前回の続きです。

claspを使うとGoogle Apps Scriptを快適にローカルで開発することができますが、
さらにclaspは、v1.5.0からTypescriptに対応しているので、typescirptで開発することができるんです。

claspが対応する前も、TypescirptをwebpackやBabelを使って、トランスパイルして、pushすることは出来ていたのですが、
正式にサポートされたおかげで、clasp pushすれば、自動的にトランスパイルされて、Google Apps Scirpt側にpushされるんです。

では、さっそく試してみましょう。

$mkdir ts-gas-sample
$cd ts-gas-sample
$npm init -y

LinterとFormatterも導入しておきましょう。

$npm install --save-dev tslint
$npm install --save-dev prettier
# tslintの設定ファイル(tslint.json)を作成する
$tslint --init

TSLintとprettierが競合してしまうことがあるので、下記のモジュールもインストールしておきます。

$npm install --save-dev tslint-config-prettier
$npm install --save-dev tslint-plugin-prettier

ちなみにTypescriptで開発をするならVSCodeがオススメです。

Visual Studio Code – Code Editing. Redefined

VSCodeでコード補完してもらえるように「@type/google-apps-script」もインストールしておきましょう。

$npm install --save-dev @types/google-apps-script

新規スクリプトを作成していきましょう。

オプションとして–rootDirを指定しておくのがオススメです。
rootDirを指定すると、claspのpullとpushの対象が指定したディレクトリ下になります。

clasp create --title ts-gas-sample --rootDir ./src

ファイル構成はこのようになっているはずです。

.
├── .clasp.json
├── node_modules/
├── package-lock.json
├── package.json
└── src
    └── appsscript.json

では、さっそくTypescriptでコードを書いてみましょう。

srcディレクトリにCode.tsを作成します。

たとえば、こんな感じのコードを書いたとします。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

function myFunction() {
    let user = { firstName: "tarou", lastName: "yamada" };
    Logger.log(greeter(user));
}

これをclasp pushしてみます。

$clasp push
$clasp open

ブラウザ上のスクリプトエディタをみると、トランスパイルされていることがわかります。

var exports = exports || {};
var module = module || { exports: exports };
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
function myFunction() {
    var user = { firstName: "tarou", lastName: "yamada" };
    Logger.log(greeter(user));
}

今回は以上です。