Cloud Functions를 TypeScript로 작성

iOS나 Android에서 Firebase를 사용한다면 Cloud Functions for Firebase을 쓸 때도 형식을 원합니다.
Cloud Functions를 TypeScript로 사용하는 환경을 구축해 봅시다.

※ 이번 구축한 환경은 starhoshi/TypeScript-Firebase-Cloud-Functions-Sample 에 push 하고 있습니다.

전제 조건

Firebase Project가 작성되었습니다

JavaScript에서 Cloud Functions Hello World가 실행 중임

소개: 첫 번째 함수 작성 및 배포  | Firebase

TypeScript 도입

전제로 JavaScript에서 Cloud Functions가 실행 중이므로 거기에 TypeScript를 도입하겠습니다.

npm install typescript

npm i typescript 그냥 typescript를 설치할 수 있습니다. 다음에 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 환경이 생겼습니다

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로 변환 할 수 있습니다

덧붙여서 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를 작성할 수 있습니다.
형태가 있는 언어로 개발할 수 있으면 모델 정의등도 할 수 있어 좋네요, 해 갑시다.

참고

starhoshi/TypeScript-Firebase-Cloud-Functions-Sample

functions-samples/typescript-getting-started at master · firebase/functions-samples