Firebaseの関数にあてる型(Type)がわからない

Question

前提・実現したいこと

タイトルの通り、Firebaseの関数にあった型が欲しいのですが調べてみてもわかりませんでした。

発生している問題・エラーメッセージ

下のように、
Firebaseの各関数を読み込むページ、
FirebaseのClassのページ、
でそれぞれファイルを分けています。

// loadFirebase.ts

const app = import("firebase/app");
const auth = import("firebase/auth");
const database = import("firebase/firestore");
const functions = import("firebase/functions");
const storage = import("firebase/storage");

const loadFirebaseDependencies = Promise.all([
  app,
  auth,
  database,
  functions,
  storage,
]).then((values) => {
  return values[0].default;
});

export default loadFirebaseDependencies;

下のfierbase.tsの
app,
auth,
db,
functions,
storage,
にあった型をどのように定義すれば良いのかわかりません。

// firebase.ts

import firebaseConfig from "./config";
import firebase from "firebase/app";

class Firebase {
　// 型がわからずとりあえずany型を使っている
  app: any;
  auth: any;
  db: any;
  functions: any;
  storage: any;

  constructor(app: any) {
    if (!firebaseInstance) {
      app.initializeApp(firebaseConfig);

      this.app = app;
      this.auth = app.auth();
      this.db = app.firestore();
      this.functions = app.functions();
      this.storage = app.storage();
    }
  }

  logout = async () => {
    await this.auth.signOut();
  };

...以下はFirebaseのログイン処理や登録などの関数記述のため省略
}

let firebaseInstance: any;
const getFirebaseInstance = (app: any) => {
  if (!firebaseInstance && app) {
    firebaseInstance = new Firebase(app);

    return firebaseInstance;
  } else if (firebaseInstance) {
    return firebaseInstance;
  } else {
    return null;
  }
};

export default getFirebaseInstance;

試したこと

https://www.npmjs.com/package/@types/firebase のサイトより @types/firebase をインストールしようとしたのですが説明欄に書かれているように

This is a stub types definition for Firebase API (https://www.firebase.com/docs/javascript/firebase). Firebase API provides its own type definitions, so you don't need @types/firebase installed!

独自の型を用意してあると書かれています。しかし型一覧のようなページを見つけられず質問に至ります。

Answer 1

VSCodeをお使いであればfirebase.auth()のように、メソッドを使った部分でカーソルを合わせると、型の情報が表示されます。

app: firebase.app.App;
auth: firebase.auth.Auth;

Comments

[moimoi_sushi]

遅くなりすみません。

const app = import("firebase/app");
const auth = import("firebase/auth");
const database = import("firebase/firestore");
const functions = import("firebase/functions");
const storage = import("firebase/storage");

const loadFirebaseDependencies = Promise.all([
app,
auth,
database,
functions,
storage,
]).then((values) => {
return values[0].default;
});

export default loadFirebaseDependencies;

上のような形で中の要素を取り出した後のためカーソルを合わせてもanyが表示されてしまいます。

[uraway_]

`"firebase/auth"` などを呼び出した場合、このライブラリ自体の型はemptyなので型は`any`となるはずです。

ドキュメントに従って、次のようにトップレベル以下のライブラリを副作用的に使用します

```
import firebase from "firebase/app";
import "firebase/auth";

const auth = firebase.auth;
```

もし、dynamic loadを使いたいのであればこんなかんじでしょうか。(動作確認はしてませんが)

```
const getFirebase = async () => {
const firebase = await import("firebase/app");

await Promise.all([import("firebase/auth")]);

return firebase;
};
```