typescript - How to access Firebase types without importing firebase module?

Question

In my webapp I use Firebase from the CDN in order to limit the amount of data transfer from my account, as shown here. By using external scripts from the CDN, I do not have to bundle firebase module with my code, so my bundle is smaller.

Now my issue is that I would like to use the types provided by firebase when I write code for my webapp in typescript. How can I achieve that without importing the firebase module?

question from:https://stackoverflow.com/questions/66067955/how-to-access-firebase-types-without-importing-firebase-module

Answer 1

I found a solution: I can import the firebase module, use it during typescript compilation, and finally exclude it from my bundle through webpack externals config:

In my html code:

<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
<script src="bundle.js"></script>

In my typescript code:

import firebase from "firebase";

firebase.initializeApp(...

In webpack.config.js:

externals: ["firebase"],

I have verified that my bundle is much slimmer: from 139kB to 53kB.