Vue + TypeScript + Firebase：如何键入包含 firebase `User` 的`ref` 的对象？

Posted 2023-02-22

【中文标题】Vue + TypeScript + Firebase：如何键入包含 firebase `User` 的`ref` 的对象？

【英文标题】：Vue + TypeScript + Firebase: How to Type an object containing a `ref` of a firebase `User`?

【发布时间】：2022-01-11 06:59:29

【问题描述】：

我有一个函数返回一个对象，该对象包含一个火力库User 的ref，ref 也可以是null。

如何定义这个函数的返回类型？

这是我的简单 Vue 可组合代码：

import  ref, Ref  from "vue";
import  projectAuth  from "@/firebase/config";
import  User, onAuthStateChanged  from "firebase/auth";

const user = ref<null | User>(projectAuth.currentUser);

onAuthStateChanged(projectAuth, (_user) => 
  user.value = _user;
);

const getUser = (): any =>  //<-- What to use here instead of "any"
  return  user ;
;

export default getUser;

我试过用这个：

const getUser = (): Ref<null | User> => 
  return  user ;
;

还有这个：

const getUser = ():  Ref<null | User>  => 
  return  user ;
;

它们都不起作用。

【参考方案1】：

想通了。

问题在于对象 user 实际上是 user: USER-KEY-VALUE-HERE 的简写。在我的情况下是 user: Ref<User | null> 。

因此最终的返回类型变为：

const getUser = ():  user: Ref<User | null>  => 
  return  user ;
;