title: How do you import Firebase Auth, Firestore and Firebase Storage node packages as well as their TypeScript's types in a class?
body: <p>I need to import Firebase packages and get them into a class for a module that has to be compatible with both Next.js and React Native. This works pretty well for the React Native version but I'm less used to React with TypeScrit and encounter serveral issues.</p>
  <p>Setup:</p>
  <ul>
  <li>VS Code</li>
  <li>TypeScript 3.9</li>
  <li>TSLint 5</li>
  <li>Lerna multirepo + Yarn workspaces with :</li>
  <li>a @project/apps common package (we are here)</li>
  <li>a @project/web package with next.js using this file</li>
  <li>a @project/mobile package for React native, using the .native.ts version of this file</li>
  </ul>
  <p>Here is the tsconfig.json:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;noImplicitAny&quot;: false,
      &quot;noUnusedLocals&quot;: true,
      &quot;removeComments&quot;: true,
      &quot;noLib&quot;: false,
      &quot;emitDecoratorMetadata&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;resolveJsonModule&quot;: true,
      &quot;declaration&quot;: true
    },
    &quot;exclude&quot;: [&quot;node_modules&quot;, &quot;**/*.spec.ts&quot;, &quot;**/__tests__/*&quot;, &quot;babel.config.js&quot;, &quot;metro.config.js&quot;, &quot;jest.config.js&quot;]
  }
  </code></pre>
  <p>here is the tslint.json:</p>
  <pre><code>{
    &quot;extends&quot;: [&quot;tslint:recommended&quot;, &quot;tslint-config-prettier&quot;],
    &quot;rules&quot;: {
      &quot;object-literal-sort-keys&quot;: false,
      &quot;interface-name&quot;: false,
      &quot;member-access&quot;: [true, &quot;no-public&quot;],
      &quot;ordered-imports&quot;: false,
      &quot;no-console&quot;: false
    }
  }
  </code></pre>
  <p>Here is the code of the Firebase class:</p>
  <pre class="lang-js prettyprint-override"><code>import app from '@firebase/app'
  import { FirebaseApp } from '@firebase/app-types'
  import '@firebase/firestore'
  import { FirebaseFirestore } from '@firebase/firestore-types'
  import '@firebase/auth'
  import { FirebaseAuth } from '@firebase/auth-types'
  import '@firebase/storage'
  import { FirebaseStorage } from '@firebase/storage-types'
  
  import firebaseConfig from './config'
  
  export class Firebase {
    app: FirebaseApp
    auth: FirebaseAuth
    db: FirebaseFirestore
    firestore: FirebaseFirestore
    files: FirebaseStorage
  
    constructor() {
      app.initializeApp(firebaseConfig)
      this.app = app.app()
      this.auth = app.auth()
      this.db = app.firestore()
      this.firestore = app.firestore
      this.files = app.storage()
    }
  }
  
  const firebase = new Firebase()
  export default firebase
  </code></pre>
  <p>I have serveral issues :</p>
  <p>On @firebase/firestore import:</p>
  <pre><code>Could not find a declaration file for module '@firebase/firestore'. 'c:/code/project/node_modules/@firebase/firestore/dist/index.node.cjs.js' implicitly has an 'any' type.
    Try `npm install @types/firebase__firestore` if it exists or add a new declaration (.d.ts) file containing `declare module '@firebase/firestore';`ts(7016)
  </code></pre>
  <p>on this.auth = app.auth() and this.files = app.storage()</p>
  <pre><code>Cannot invoke an object which is possibly 'undefined'.ts(2722)
  </code></pre>
  <p>on this.db = app.firestore() and this.firestore = app.firestore</p>
  <pre><code>Property 'firestore' does not exist on type 'FirebaseNamespace'.ts(2339)
  </code></pre>
  <p>Ok... It is a mess. I read several tutorials but I don't get it from now. Could you help?</p>