使用来自两个相似接口的默认值的对象解构

Question

我有两个接口，User 和 BankUser。 BankUser的接口大致如下：

interface BankUser extends User {
  banks: { [bank_id: string]: string};
  isSuper: boolean;
}

我有一个函数，我要传入User 或BankUser，我希望从中得到BankUser。如果是用户，则应为BankUser 添加默认属性。

const cleanedUser = (user: User | BankUser): BankUser => {
  const {uid, displayName, email, phoneNumber, photoURL, banks = {}, isSuper = false} = user;
  return {uid, displayName, email, phoneNumber, photoURL, banks, isSuper} as BankUser;
}

我收到两个 TS2339 错误，表明银行和 isSuper 在类型 User | BankUser 上不存在，例如：

TS2339：User | BankUser 类型上不存在属性“银行”

如果我在函数上方添加// @ts-ignore，它会起作用，我可以发送User 或BankUser，但我尽量避免这种情况。有没有更好的方法来处理这个问题？

Answer 1

TypeScript 不喜欢查找对象类型中未明确提及的对象属性。在这种情况下，User 没有明确提及banks 或isSuper，因此会出现编译器错误。是的，BankUser 确实有这样的属性，但user 可能是User，所以这是一个错误。

如果您想说服编译器查找该属性，您需要将user 视为比User | BankUser 更具体的东西。例如，您可以将其视为User & Partial<BankUser>。已知该类型具有User 的所有属性，并且可选地具有来自BankUser 的额外属性。这给了你这个：

const cleanedUser = (user: User | BankUser): BankUser => {
    const {
        uid, displayName, email, phoneNumber, photoURL, banks = {}, isSuper = false
    } = user as User & Partial<BankUser>; // no error now
    return { uid, displayName, email, phoneNumber, photoURL, banks, isSuper };
}

另外，根据您的用例，我可能会像这样实现cleanedUser：

const cleanedUser2 = (user: User | BankUser): BankUser => {
    return { banks: {}, isSuper: false, ...user };
}

这需要更少的类型操作和更少的输入。如果您假设为user 传递的值完全是User 或BankUser 并且没有额外的属性，则它具有与cleanedUser 相同的行为。

---

一旦您期望user 可能有额外的属性，那么您可能需要更加小心cleanedUser() 或cleanedUser2() 的实现，因为User 类型的值可能有，比如说，额外的isSuper 类型为 number 的属性。这是一个完全有效的User，但你会在清洁时看到奇怪的事情发生：

interface Hmm extends User {
    isSuper: number;
}
const hmm: Hmm = {
    uid: "", email: "", displayName: "", phoneNumber: "", photoURL: "", isSuper: 100
};
const beCareful = cleanedUser(hmm);
console.log(beCareful.isSuper) // boolean at compile time, number at runtime !!!

所以要小心。

---

好的，希望对您有所帮助；祝你好运！

Link to code