前回の続きです。
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)); }
今回は以上です。