Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

クラウド機能にTypeScriptを使用する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

TypeScript で関数を作成することを好む開発者のために、Cloud Functions は次の 2 種類のサポートを提供します。

  • 初期化時の自動トランスパイル用に TypeScript プロジェクトを作成および構成します ( firebase firebase init functions )。
  • predeploy hookを介してデプロイ時に既存の TypeScript ソースを JavaScript にトランスパイルします。

このガイドの手順に従って、既存の JavaScript プロジェクトを TypeScript に移行し、predeploy フックを使用して関数のデプロイを続行し、ソース コードをトランスパイルできます。 TypeScript は、関数を記述する際に通常の JavaScript よりも多くの利点を提供します。

  • TypeScript は、async/await などの最新の JavaScript 機能をサポートし、プロミス管理を簡素化します
  • Cloud Functions リンターは、コーディング中の一般的な問題を浮き彫りにします
  • タイプ セーフは、デプロイされた関数のランタイム エラーを回避するのに役立ちます

TypeScript を初めて使用する場合は、 TypeScript in 5 minutesを参照してください。

TypeScript を使用した新しい Cloud Functions プロジェクトの初期化

新しいディレクトリでfirebase init functionsを実行します。このツールは、JavaScript または TypeScript を使用してプロジェクトをビルドするオプションを提供します。 TypeScriptを選択して、次のプロジェクト構造を出力します。

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- .eslintrc.js # Optional file if you enabled ESLint
      +- tsconfig.dev.json # Optional file that references .eslintrc.js
      |
      +- 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

初期化が完了したら、index.ts のサンプルのコメントを外し、 npm run serveを実行して、「Hello World」関数が動作していることを確認します。

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

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

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

     {
       "name": "functions",
       "scripts": {
         "build": "npm run lint && tsc"
       }
     ...
    
  2. firebase.json を編集して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": "npm run lint && tsc"
       }
     ...
    
  8. npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parserを実行して、 "typescript"を開発依存関係として追加します。

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

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

TypeScript 関数のエミュレート

TypeScript 関数をローカルでテストするには、「関数をローカルで実行する」で説明されているエミュレーション ツールを使用できます。これらのツールを使用する前にコードをコンパイルすることが重要であるため、 firebase emulators:startまたはfirebase functions:shellを実行する前に、必ず functions ディレクトリ内でnpm run buildを実行してください。または、 npm run serveまたはnpm run shellをショートカットとして実行します。これらのコマンドは両方ともビルドを実行し、関数シェルを提供/開始します。

TypeScript プロジェクトの関数ログ

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