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

【问题标题】：Vue + TypeScript + Firebase: How to Type an object containing a `ref` of a firebase `User`?Vue + TypeScript + Firebase：如何键入包含 firebase `User` 的`ref` 的对象？
【发布时间】：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 };
};

它们都不起作用。

【问题讨论】：

标签： typescript firebase vue.js

【解决方案1】：

想通了。

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

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

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

【讨论】：