Cloud Functions に TypeScript を使用する

TypeScript で関数を記述したい場合、Cloud Functions では次の 2 つの方法がサポートされています。

  • 初期化時(firebase init functions)に自動的にトランスパイルされる TypeScript プロジェクトを作成して設定する。
  • 事前デプロイフックを使用して、既存の TypeScript ソースをデプロイ時に JavaScript にトランスパイルする。

このガイドの手順に沿って操作すると、既存の JavaScript プロジェクトを TypeScript に移行し、事前デプロイフックを使ってソースコードをトランスパイルして関数をデプロイすることができます。関数を記述するときは、Vanilla JavaScript よりも TypeScript を使用したほうが多くの利点があります。

  • TypeScript は async や await といった最新の JavaScript 機能をサポートしているため、Promise の管理が簡素化される
  • Cloud Functions のリンターによって、コーディング中によくある問題が強調表示される
  • データ型のチェック機能によって、デプロイされた関数のランタイム エラーを回避できる

TypeScript で記述された Cloud Functions の実装サンプルについては、GitHub リポジトリの typescript-getting-started を参照してください。

TypeScript で新しい Cloud Functions プロジェクトを初期化する

新しいディレクトリで firebase init を実行します。JavaScript と TypeScript のどちらを使ってプロジェクトをビルドするか選択できます。ここでは TypeScript を選択します。以下のプロジェクト構造が出力されます。

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- tslint.json # Optional file
      |
      +- src/     # Directory containing TypeScript source
      |   |
      |   +- index.ts  # main source file for your Cloud Functions code
      |
      +- lib/
          |
          +- index.js  # Built/transpiled JavaScript code
          |
          +- index.js.map # Source map for debugging

既存の TypeScript プロジェクトを使用する

既存の TypeScript プロジェクトがある場合は、事前デプロイフックを追加して、Cloud Functions for Firebase にコードをデプロイするたびにプロジェクトがトランスパイルされるようにすることができます。これを行うには、正しい形式の tsconfig.json ファイルと Firebase プロジェクトが必要です。また、Firebase 設定を次のように変更する必要があります。

  1. package.json を編集して、TypeScript プロジェクトをビルドするための bash スクリプトを追加します。例:

     {
       "name": "functions",
       "scripts": {
         "build": "./node_modules/.bin/tslint -p tslint.json && ./node_modules/.bin/tsc"
       }
     ...
    
  2. firebase.json を編集して、ビルド スクリプトを実行するための事前デプロイフックを追加します。例:

     {
       "functions": {
         "predeploy": "npm --prefix functions run build",
       }
     }
    

この設定では、firebase deploy --only functions コマンドが TypeScript コードをビルドし、それを関数としてデプロイします。

既存の JavaScript プロジェクトを TypeScript に移行する

JavaScript で開発された初期化済みの既存の Cloud Functions プロジェクトがある場合は、それを TypeScript に移行できます。作業に先立って、git チェックポイントやその他のバックアップを作成することを強くおすすめします。

既存の JavaScript Cloud Functions プロジェクトを移行するには:

  1. git チェックポイントを作成し、既存の JavaScript ソースファイルのコピーを保存します。
  2. プロジェクト ディレクトリで firebase init functions を実行し、関数を記述する言語を尋ねられたら TypeScript を選択します。
  3. 既存の package.json ファイルを上書きするかの確認が表示されたら、既存のファイルを残す必要がないことがはっきりしている場合以外は [いいえ] を選択します。
  4. functions/src ディレクトリの index.ts を既存のソースコードで置き換えて、元のファイルを削除します。
  5. 初期化時に作成された tsconfig.json ファイルで、JavaScript を許可するようにコンパイラ オプションを設定します("allowJs": "true")。
  6. 保存した package.json ファイルを functions ディレクトリにコピーし、それを編集して "main""lib/index.js" に設定します。
  7. package.json で、次のような TypeScript 用のビルド スクリプトを追加します。

     {
       "name": "functions",
       "scripts": {
         "build": "./node_modules/.bin/tslint --project tsconfig.json && ./node_modules/.bin/tsc"
       }
     ...
    
  8. dev の依存関係として "typescript" を追加するため、npm install --save --only=dev typescript を実行します。

  9. すべての依存関係について、npm install --save @types/<dependency> を実行します。

  10. 必要に応じて、ソースコードを .js から .ts に書き換えます。

TypeScript プロジェクトの Functions ログ

firebase deploy の実行時に、プロジェクトの index.tsindex.js にトランスパイルされます。つまり、Cloud Functions ログは、デベロッパーが作成したコードではなく index.js ファイルから行番号を出力します。index.ts で対応するパスと行番号を見つけやすくするために、firebase deployfunctions/lib/index.js.map を作成します。このソースマップは、お好みの IDE またはノード モジュール経由で使用できます。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。