Setting up Firebase Cloud Functions to use TypeScript

Published Feb 14, 2018
Setting up Firebase Cloud Functions to use TypeScript

If you are like me, who thinks the combination of Firebase services with Angular5 is a match made in heaven, then you must have already explored Firestore and Firebase Cloud Functions.

At this point, you are beginning to get used to the idea of strong typing made possible by Typescript, which allows you to create data models and interfaces.

This makes your code more robust and less prone to errors that would normally slip by unnoticed and cause your app to fail silently during execution in normal JavaScript code. Thus, some situations you are used to writing tests for in pure JavaScript become really trivial or sometimes needless.

During development, you usually find yourself switching between your Angular source code and your cloud function's source code.
Then comes the stark contrast, when you realize that Angular5 is set up using TypeScript while the cloud functions source code is in good ol' JavaScript.

Immediately the difference becomes really clear. In pure JavaScript,
shape-shifting variables are a norm. In this world, a variable originally assigned a string can be reassigned a number, then an object.

In this egalitarian world, where a variable of type product or school or user doesn't exist — you might say, what are classes for?

Here, managing complex multi-step asynchronous operations becomes really verbose instead of using async / await. import turns into require and export turns into module.exports (Although that's the least your worries).

In the spirit of Isomorphism, you chose to convert your Angular5 source code to use pure JavaScript instead (Oh! the horror), just kidding 😃

Okay, it's the other way around. You chose to convert your cloud functions source code to support TypeScript instead.

The first phase is to set up the necessary dependencies.

Step 1.

cd into your functions directory. cd functions.

Step 2.

npm install --save-dev typescript

Step 3.
Update your package.json file with the following fields:

{
    ...,
    "scripts": {
         ...,
         "build": "tsc",
         "watch": "tsc --watch",
         "deploy": "tsc && firebase deploy --only functions"
     },
    "main": "build/index.js",
}

Step 4.

Still, in your functions root folder, create a new file called tsconfig.json and add the following content to it.

  "compilerOptions": {
    "lib": ["es6", "es2015.promise"],
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "build",
    "sourceMap": true,
    "target": "es6"
  },
  "include": [
    "src/**/*.ts",
    "spec/**/*.ts"
  ]
}

For more info on what each of the fields do, here is a really nice reference to look up.

Step 5.

Create a src folder in the root of your functions folder and
move all of the source code for your cloud functions into it.

In this next phase, we refactor our code to support TypeScript.

  1. We update the .js extension in all files in the src directory to .ts.

  2. All const variable = require('<package_name>'), will turn into import * as variable from '<package_name>'.

  3. Replace all var with let or const (let for when the variable is reassignable).

  4. Replace allmodule.exports with export let.

Once the above steps are done, congratulations! you are now ready to start using TypeScript and a list of awesome features it provides, which you are already used to in your Angular5 source code on your server-side as well.

Deploy your app

Once you are done editing your source code and ready to deploy,
all you have to do is type the following command in your terminal:

npm run deploy.

This will build and deploy your functions to the cloud.

Cheers!

Discover and read more posts from Orion
get started