找不到名称“ firebase”香草打字稿

Question

我到处搜索，找不到解决此问题的方法：

var config = {
    apiKey: "xxxxxxxx",
    authDomain: "xxxxxxxxx",
    databaseURL: "xxxxxxxxx",
    projectId: "xxxxxxx",
    storageBucket: "xxxxxxxxxx",
    messagingSenderId: "xxxxxxxx"
};
firebase.initializeApp(config);

我没有使用Angular或node.js，只是在vscode中使用了普通打字稿，无论我做什么，'firebase'始终是红色线条，并且找不到名称。我分步阅读了文档和一些youtube教程，但现在我很绝望。部署工程，那里没有问题……

我也在html中使用了此链接：

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

在文件之间移动给定的摘要无济于事。 我在做什么错了？

我发现了一些奇怪的东西。在chrome控制台中，我能够找到“ firebase”，它存在并从CDN导入，但是在VSCode中是不一样的，因为缺少名称错误，它仍然无法编译。

可能与我的tsconfig相关吗？

编辑＃2：我联系了Firebase支持，我们正在寻找解决方案，我必须指出，他们提供了出色的技术支持，荣誉。 我的理论现在是我的VSCode .ts文件无法从不是.ts的文件中导入变量。这正常吗？

Answer 1

TypeScript不知道您正在导入Firebase，因为导入是在html文件中进行的。尽管您可能会清楚地知道您的ts文件将在同一html文件中使用，但是TypeScript无法确定这一点，并且也无法假定您的ts文件将仅用于以下HTML页面中已包含Firebase。

---

最好的解决方案是使用firebase

将npm视为真实依赖项

npm install --save firebase

，然后将其导入您的ts文件中：

import * as firebase from 'firebase';

var config = {
    ...
};
firebase.initializeApp(config);

然后使用Webpack或类似于compile that TypeScript to a single js file的工具

---

如果您不想添加真实的导入，则可以使用以下方法仅引用Firebase中的全局类型：

declare const firebase: typeof import('firebase');

var config = {
    ...
};
firebase.initializeApp(config);

这还要求您使用npm在本地安装Firebase。

Answer 2

我想知道是否还有另一种方法（使用tsconfig），但是将以下行添加到条目文件的顶部即可解决此问题：

/// <reference path="node_modules/firebase/index.d.ts" />

Answer 3

TL; DR 只需下载this file并将其扔到项目文件夹中的某个位置即可。

简单的解决方案，但会被警告，这样做意味着Typescript始终假设您的脚本可以访问变量firebase，即使实际上没有。

---

正如@Matt Bierner所说，您正在使用HTML中的脚本标签导入firebase。因此Typescript不知道导入了firebase。因此，它对“ firebase”一无所知，因此用红线标出。

他的解决方案包括从npm安装firebase程序包并将其导入，以及对其进行web打包，因为node_modules（包含所有npm程序包的文件夹）通常不是您的前端代码可以访问的东西。

为什么捆绑npm firebase软件包可以解决此问题？因为一方面，在包中有一个名为index.d.ts的文件，该文件告诉Typescript关于firebase对象所需的一切。

因此，除了Webpacking和其他内容外，您可以跳过所有内容，而只需将文件复制到项目文件夹中即可。 VSCode将找到它，并且不再抱怨“ firebase”。

这是文件的链接：https://github.com/firebase/firebase-js-sdk/blob/master/packages/firebase/index.d.ts

---

警告：您的应用中可能有些页面无法访问firebase。如果您在这些页面上使用firebase，即使TypeType应该打字也不会引发错误，因此Javascript可能会引发错误，很可能是'firebase' is not defined。

仅记得在您需要firebase的任何页面上包含firebase HTML片段。

对于我来说，我通常会制作firebase还是全球通用的单页应用程序，因此这是一个很好的解决方法。