Typescript 有條件的 Object 鍵：存在 Prop A 存在 Prob B

Question

背景

我想根據 object 中是否存在另一個鍵，有條件地在 object 中鍵入鍵。

問題

我有一個 object 有一些必需的鍵和一些可選的。 我不知道如何制作，因此其中一個可選鍵取決於另一個可選鍵是否存在。 例如，

interface User { 
  username: string;
  id: string;
  member?: boolean; 
  memberStatus?: string;
}

現在，假設我有一個正在映射的用戶列表，如果用戶是member ，我想顯示一個按鈕，並根據memberStatus將該按鈕設為特定顏色。

return users.map(user => (
  if(user.member) { 
    //memberStatus here will cause an error because it maybe a string or undefined
    <button className={memberStatus === 'active' ? 'green' : 'yellow'}>Member Button</button>
  }
  return (
    <p>{user.username} is a user</p>
  )
))

我試過的

我查找了擴展接口和條件類型。 但是，從用戶界面擴展了成員界面，但這仍然給我留下了可選的鍵。

問題

是否可以創建這樣的界面

interface User { 
 username: string;
 id: string;
 member?: string;
 memberStatus: string; 
}

type UserOrMember = User.member ? User : Omit<User, 'memberStatus'>

apiUsers: UserOrMember = [...users]

同樣，目標是memberStatus僅在member不是undefined時才需要。

擴展接口或 generics 是否有任何可能有用的東西？

Answer 1

您可以嘗試標記聯合類型：

// declare types
interface BaseUser {
  username: string;
  id: string;
  member?: boolean;
}

interface User extends BaseUser {
  member?: false;
}

interface Member extends BaseUser {
  member: true;
  memberStatus: string;
}

type UserOrMember = User | Member;

// usage in component
declare const user: UserOrMember
console.log(user.member ? user.memberStatus : user.username)

游樂場鏈接