[英]Typescript Conditional Object Keys: Prop A exists Prob B must exist
I want to conditionally type keys in an object based on the existence of another key in that object.我想根据 object 中是否存在另一个键,有条件地在 object 中键入键。
I have an object that has some required keys and some optional.我有一个 object 有一些必需的键和一些可选的。 I do not know how to make it so one of the optional keys is contingent upon the other optional key being present.
我不知道如何制作,因此其中一个可选键取决于另一个可选键是否存在。 For instance,
例如,
interface User {
username: string;
id: string;
member?: boolean;
memberStatus?: string;
}
Now, let's say I have a list of users that I am mapping through and I want to show a button if the user is a member
and make that button a specific color based on memberStatus
.现在,假设我有一个正在映射的用户列表,如果用户是
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>
)
))
I looked up extending interfaces and conditional typing.我查找了扩展接口和条件类型。 However, extending a Member interface from the User interface but that still leaves me with optional keys.
但是,从用户界面扩展了成员界面,但这仍然给我留下了可选的键。
Is it possible to create an interface like so是否可以创建这样的界面
interface User {
username: string;
id: string;
member?: string;
memberStatus: string;
}
type UserOrMember = User.member ? User : Omit<User, 'memberStatus'>
apiUsers: UserOrMember = [...users]
Again, the goal is that memberStatus
is only required if member
is not undefined
.同样,目标是
memberStatus
仅在member
不是undefined
时才需要。
Is there anything I am missing with extending interfaces or generics that could be helpful?扩展接口或 generics 是否有任何可能有用的东西?
You can try Tagged union types :您可以尝试标记联合类型:
// 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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.