Firebase 3.0 与打字稿答案

【问题标题】：Firebase 3.0 with typescriptFirebase 3.0 与打字稿
【发布时间】：2016-09-16 03:28:50
【问题描述】：

我正在尝试按照 google 给出的指南开发一个具有 angular2 和 firebase 3.0 身份验证的网络应用程序。然而，所有的 web 指南都有 javascript 示例。

我在 index.html 中添加了以下行

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
var config = {
   apiKey: "AIzaSyCSfBMvAdEDpcm-z6gWp2XXXXXXXXXXXXX",
   authDomain: "fototrans-calculator.firebaseapp.com",
   databaseURL: "https://fototrans-calculator.firebaseio.com",
   storageBucket: "fototrans-calculator.appspot.com",
};
firebase.initializeApp(config);

但是当我尝试使用时

rootRef = firebase.database.ref();

我在“firebase”上收到错误提示

[ts] Cannot find name 'firebase'.

现在我记得我已经使用以前版本的 Firebase 的类型安装了 Firebase。新版本的 Firebase 是否还有类似的东西？请指导。

提前致谢

【问题讨论】：

标签： typescript firebase firebase-authentication

【解决方案1】：

从 Firebase 3.2.1 开始，类型包含在官方 NPM 包中：

https://firebase.google.com/support/release-notes/js#wzxhzdk4version_321_-_july_26_2016wzxhzdk5

【讨论】：

在通过typings install --global --save file:... 包含这些类型然后编译我的项目时，我看到了大量的 TypeScript 编译错误。
有人知道一些使用这些类型的工作示例代码吗？
@ktusznio 似乎内置类型仅适用于 Typescript 2

【解决方案2】：

您可以使用 AngularFire2 GitHub 存储库（位于 here）中提供的 Typings 定义文件：

在您的 typings.json 文件中包含以下内容：

{
  "ambientDependencies": {
    "firebase": "github:angular/angularfire2/manual_typings/firebase3/firebase3.d.ts#2c9ab3117eeb804e8e4996461eddcf32efa54a56"
  }
}

请注意，此处的值只是 GitHub 上文件的路径，后跟相关的提交哈希。在撰写本文时，示例中的哈希为 master，因此您可能希望更新到最新的提交。

接下来您可以运行node_modules/.bin/typings install，Typings 将应用您typings.json 文件中的最新更改。

【讨论】：

【解决方案3】：

你可以试试这个： https://github.com/angular/angularfire2/tree/master/manual_typings/firebase3

要让它工作，你需要将它添加到你的 tsconfig.json：

"filesGlob": [
"**/*.ts",
"!node_modules/**/*",
"firebase3.d.ts"
],

并将文件复制到与您的 tsconfig.json 相同的文件夹中。

【讨论】：

【解决方案4】：

https://github.com/suhdev/firebase-3-typescript有一个类型定义文件

我已经提交了pull request，希望能解决您所描述的问题。

【讨论】：

在您的 tsconfig.json 文件中，在“files”数组中包含以下行：“files”：[“node_modules/angularfire2/firebase3.d.ts”] 这是 Firebase 之前的临时步骤类型被发布到 npm。
FWIW，这些类型在 tslint 上爆炸了。

【解决方案5】：

你可以通过declare var firebase: any;来解决这个问题

【讨论】：

它可以工作，但它不再受益于 Typescript 输入
@Jacky 我知道 :( AngularFire2 的新版本有手动 Firebase 3 类型，但我还没有弄清楚如何让它们工作：github.com/angular/angularfire2/blob/master/manual_typings/…
@Alex。是的，我也有同样的问题。我正在尝试在 Angular CLI 设置下使用 firebase3 和 angularfire2。虽然 angularfire2 类型运行良好，但我无法让 firebase3 类型得到识别。感觉我已经尝试了所有可能的组合。
@VitaliKniazeu 我决定稍微备份一下，等待它成熟一点，问题队列中有很多讨论，我相信它会解决很快！