Using firebase functions from web sdk using typescript

Question

I'm attempting to directly call a firebase function from the javascript SDK and the functions property is not defined on firebase.

I have updated to version 4.12.1 of the firebase module

I'm using typescript and importing the module as follows

import * as firebase from 'firebase';

import * as functions from 'firebase/functions';

And am attempting to call my function:

firebase.functions().httpsCallable('myFunc')(payload)

Which results in a compiler error:

Property 'functions' does not exist on type 'typeof firebase'.

Which according to the docs is how they should be called: https://firebase.google.com/docs/functions/callable

If I replace the imports with regular imports everything works

const firebase = require('firebase');

const functions = require('firebase/functions'); 

Is there a known issue with the type definitions or am I doing something wrong here?

Answer 1

I believe you want:

import * as firebase from 'firebase/app'
import 'firebase/functions'

firebase.initializeApp({/* ... */});

const myFn = firebase.functions().httpsCallable('myFn');

Answer 2

I ran into the same issue...

Looks like there is a problem with @firebase/* type packages in current Version 4.12.1 of the firebase JS SDK. They are simply not included neither in node_modules/firebase/app/index.d.ts nor node_modules/firebase/index.d.ts. It seems that there is a branch "build-fixes" that target that issue.

Update: The branch has been merged, but doesn't fix it. I added a dedicated pull request here: https://github.com/firebase/firebase-js-sdk/pull/724 that has been merged recently, expecting the changes in the next release >4.13.1

I fixed it by adding the Type declarations from https://github.com/mpoehler/firebase-js-sdk/blob/master/packages/functions-types/index.d.ts to node_modules/firebase/app/index.d.ts. Doing so I was able use the following code with no errors and type suggestions in VSC.

import * as firebase from 'firebase/app';
import '@firebase/functions';

firebase.initializeApp({
...
});

// call function
let func = firebase.functions().httpsCallable('myFunc');
func({text: 'huch'}).then(result => console.log('...and returned!'));

That's more a dirty hack than a solution and I hope the PR mentioned above will be merged soon.

As requested by @jbb, here are the important parts needed in node_modules/firebase/app/index.d.ts:

declare namespace firebase {
   ....
   function functions(app?: firebase.app.App): firebase.functions.FirebaseFunctions;
   ...
}

declare namespace firebase.app {
   interface App {
   ...
   functions(): firebase.functions.FirebaseFunctions;
   ...
   }
}

declare namespace firebase.functions {
  export interface HttpsCallableResult {
    readonly data: any;
  }
  export interface HttpsCallable {
    (data?: any): Promise<HttpsCallableResult>;
  }
  export class FirebaseFunctions {
    private constructor();
    httpsCallable(name: string): HttpsCallable;
  }
  export type FunctionsErrorCode =
    | 'ok'
    | 'cancelled'
    | 'unknown'
    | 'invalid-argument'
    | 'deadline-exceeded'
    | 'not-found'
    | 'already-exists'
    | 'permission-denied'
    | 'resource-exhausted'
    | 'failed-precondition'
    | 'aborted'
    | 'out-of-range'
    | 'unimplemented'
    | 'internal'
    | 'unavailable'
    | 'data-loss'
    | 'unauthenticated';
  export interface HttpsError extends Error {
    readonly code: FunctionsErrorCode;
    readonly details?: any;
  }
}