コンソールへ移動

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 を初めてお使いの方は、TypeScript in 5 minutes.を参照してください。

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 tslint typescript を実行します。

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

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

TypeScript ファンクションをエミュレートする

TypeScript ファンクションをローカルでテストするには、ファンクションをローカルで実行するで説明されているエミュレーション ツールを使用します。このツールを使用するには、事前にコードをコンパイルする必要があります。firebase serve または firebase functions:shell を実行する前に、ファンクション ディレクトリ内で npm run build を実行してください。あるいは、ショートカットとして npm run serve または npm run shell を実行します。いずれのコマンドもビルドを実行し、ファンクション シェルを提供、起動します。

TypeScript プロジェクトの Functions ログ

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