Question

我正在制作一个项目，其中我使用打字稿，也使用模块系统（type="module"）。我将以下内容放入我的main.html文件中。

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

我还有另一个文件firebase.ts，其中包含

// @ ts-nocheck;

var firebaseConfig = {
    apiKey: "AIzaSyAePVmVNzKbvbLnAGP1VVQwyEaE7pJ3a_M",
    authDomain: "chess-3ea12.firebaseapp.com",
    databaseURL: "https://chess-3ea12.firebaseio.com",
    projectId: "chess-3ea12",
    storageBucket: "chess-3ea12.appspot.com",
    messagingSenderId: "454944098464",
    appId: "1:454944098464:web:9d10fe0a1808233f5ca1c5"
  };
  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default {
    fs: firebase.database(),
    db: firebase.database().ref(),
    auth: firebase.auth()
}

打字稿显然会显示错误

找不到名称'firebase'

该如何解决，这意味着我可以将模块添加到firebase，以便可以将其导入任何文件中。

Answer 1

您可以将Firebase安装为依赖项，以便它出现在node_modules中。但是，除了其定义文件之外，您实际上不会在其中使用任何东西。使用typeof import(...)语法，您可以导入模块的类型，因此可以将其导入并在窗口上声明Firebase类型：

declare global {
    interface Window {
        firebase: typeof import('firebase');
    }
}

然后，您将能够引用window.firebase并使用其类型：

const { firebase } = window;
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default {
    fs: firebase.database(),
    db: firebase.database().ref(),
    auth: firebase.auth()
}

如何在前端使用Firebase作为模块？

1 个答案: