Help us understand the problem. What is going on with this article?

Cloud Functions を TypeScript で書く

More than 1 year has passed since last update.

iOS や Android で Firebase を使っているなら、 Cloud Functions for Firebase を書く時にも型が欲しくなりますよね。
というわけで Cloud Functions を TypeScript でかける環境を構築してみましょう。

※ 今回構築した環境は starhoshi/TypeScript-Firebase-Cloud-Functions-Sample に push してあります。

前提条件

TypeScript の導入

前提として JavaScript で Cloud Functions が動いているはずなので、そこに TypeScript を導入していきましょう。

npm install typescript

npm i typescript だけで typescript が install できます。ついでに tslint も入れておきましょう。

$ cd functions
$ npm i typescript tslint --save-dev

tsconfig.json

同階層に tsconfig.json というファイルを作リます、どうコンパイルするかなどの設定です。
以下は tsconfig.json · TypeScript を参考にちょっと書き換えたものです。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modeles"
  ]
}

tsc --init でも生成できますがイマイチだったのでコピって持ってきた方が楽な気がします。

package.json

package.json の "scripts" に build, watch, deploy の3行を追加しましょう、コンパイルやデプロイなどのコマンドです。

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase experimental:functions:shell",
    "start": "npm run shell",
    "logs": "firebase functions:log",
    "build": "tsc", // typescript compile
    "watch": "tsc --watch", // ファイルを監視し自動 compile
    "deploy": "tsc && firebase deploy --only functions" // compile & deploy
  },
  ...
}

これで TypeScript の環境ができました :tada:

index.ts

では実際に typescript で Cloud Functions を書いていきましょう。
functions/src/index.ts を作成してください。

import * as functions from 'firebase-functions'

export const helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!\n\n")
})

次に以下のコマンドでコンパイルします。

$ npm run build

そうすると functions/index.js が生成されているはずです。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const functions = require("firebase-functions");
exports.helloWorld = functions.https.onRequest((request, response) => {
    response.send("Hello from Firebase!\n\n");
});
//# sourceMappingURL=index.js.map

問題なく TypeScript を JavaScript に変換できました :tada:

ちなみに npm run watch とするとファイルを監視して自動コンパイルしてくれます。

deploy

ではこの関数をサーバで動かしてみましょう。

$ npm run deploy
...
Function URL (helloWorld2): https://hoge.cloudfunctions.net/helloWorld

✔  Deploy complete!

と出るはずです。この url を curl で叩いてみましょう。

$ curl https://hoge.cloudfunctions.net/helloWorld
Hello from Firebase!

と出ましたね、無事 Deploy が成功しました、これで TypeScript で開発していけます。

tslint

環境構築は終わったのですがせっかくなので Lint を導入しましょう。

tslint.json

$ ./node_modules/tslint/bin/tslint --init

と打つと以下の json が生成されます。

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

TSLint core rules にルールの説明があるので必要に応じて on/off していきましょう。
今回は標準に従っていくことにします。

エディタ

エディタはなんでもいいのですが、 Visual Studio Code が色々気が利いていて楽です。
TSLint の拡張を install しましょう。

そうすると [tslint] ' should be " (quotemark) [tslint] Missing semicolon (semicolon) というエラーがエディタに表示されるので、以下のようにコードを修正しましょう。

import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!\n\n");
});

"' にしてセミコロンを追加しました。これで tslint のエラーも解決できました。

おわり

これで lint チェックしつつ TypeScript を書いていけるようになりました :muscle:
型のある言語で開発できるとモデル定義などもできて良いですね、やっていきましょう。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away