在Firebase项目中共享Typescript接口 [英] Share Typescript Interfaces inside a Firebase project

问题描述

我正在一个Firebase项目中，其中前端是用Angular编写的.我正在使用@ angular/fire库.

I am working on a Firebase project where the frontend is written in Angular. I am using the @angular/fire library.

我定义了几个使用firebase和firestore类型的接口.

I defined several interfaces where I use firebase and firestore types.

例如

   export interface SchoolAddress {
     street: string;
     city: string;
     state: string;
     region: string;
     zip: string;
     note: string;
     position?: firestore.GeoPoint;
  }

现在，我想在Angular的前端和在firebase SDK顶部编写的后端Cloud Function之间共享此接口.

Now I would like to share this interface between the frontend in Angular and a backend Cloud Function written on top of the firebase SDK.

到目前为止，问题是我无法以与两个项目都兼容的方式导入"GeoPoint"之类的类型

The problem is so far I was unable to import types like "GeoPoint"in a way that works with both the two projects

import { firestore } from 'firebase';    

可以在Angular应用程序上工作，但不能在后端工作，编译失败.

Works on the Angular app but not on the backend, the compilation fails.

Angular应用程序package.json

Angular app package.json

...
"dependencies": {
    "@angular/animations": "~10.1.6",
    "@angular/cdk": "^10.2.5",
    "@angular/common": "~10.1.6",
    "@angular/compiler": "~10.1.6",
    "@angular/core": "~10.1.6",
    "@angular/fire": "^6.0.3",
    "@angular/forms": "~10.1.6",
    "@angular/localize": "^10.1.6",
    "@angular/material": "^10.2.5",
    "@angular/platform-browser": "~10.1.6",
    "@angular/platform-browser-dynamic": "~10.1.6",
    "@angular/router": "~10.1.6",
    "firebase": "^7.13.1",
    "ngx-wig": "^10.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
...

后端pakage.json

Backend pakage.json

...
"dependencies": {
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.1"
  },
...

如果只需要一个类型定义，我就不想在BE中导入完整的firebase软件包.最好的方法是什么?

I do not want to import the full firebase package in the BE if not needed only to have one type definition. What is the best way to do it?

推荐答案

Web客户端和后端SDK的API和接口都不同.它们没有共享Firestore数据类型的通用定义，因此，您只能在界面中说两样都可以编译和使用的内容，除非在所有代码中都导入了这两个定义，并且使用并集类型来接受两者他们.

The APIs and interfaces are different between both the web client and backend SDKs. They don't share common definitions for Firestore data types, so there's nothing you can say in your interface that would compile and work for both, short of having both definitions imported in all of your code, and using a union type to accept both of them.

具体来说，用于网络客户端的 firebase 模块导出 firebase.firestore.GeoPoint ，而 firebase-admin 重新导出Google Cloud SDK的

To be specific, the firebase module for web clients exports firebase.firestore.GeoPoint, whereas firebase-admin re-exports the Google Cloud SDK's firestore.GeoPoint. They simply aren't the same object, and you can't coerce them to actually be the same. The same is true for other types such as FieldValue and Timestamp - they are simply different types between different libraries.

在这里您可能要做的最好的事情就是创建自己的抽象层，这两个SDK都可以实现.因此，您将引入自己的GeoPoint接口，并在幕后提供实现该接口的对象，而不管哪个SDK生成了文档.仅在前端和后端之间共享一些接口确实需要很多工作，但是如果您不愿意在两侧导入SDK，那就必须这样做.

Probably the best you can do here is create your own abstraction layer that can be implemented by both SDKs. So, you would introduce your own GeoPoint interface, and provide objects behind the scenes that implement that interface no matter which SDK generated the document. It's really a lot of work just to share some interfaces between front and backend, but that's how it'll have to go if you're unwilling to import the SDKs on both sides.

这篇关于在Firebase项目中共享Typescript接口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！