[英]TypeScript fails to get the type of the elements of an object correctly
I am developing a React Native project with Expo.我正在使用 Expo 开发一个 React Native 项目。 I have defined a function called
setRoleColors
that sets some colors based on the variable role.我已经定义了一个名为
setRoleColors
的 function,它根据变量角色设置一些 colors。
export const setRoleColors = (role: string) => {
switch (role) {
case "student":
return { backgroundColor: Color.maroon.dark, color: "#fff" };
case "moderator":
return { backgroundColor:"#00ff00", color: "#000"};
case "user":
return { backgroundColor:"#0000ff", color: "#fff";
}
};
I import the function setRoleColors
into a component called UserRole
.我将 function
setRoleColors
导入到名为UserRole
的组件中。
import React from "react";
import { Text, View } from "react-native";
import { setRoleColors } from "../../services/SetRoleColors";
import styles from "./styles";
const UserRole: React.FC<{ role: string }> = ({ role }) => {
const { backgroundColor, color } = setRoleColors(role);
return (
<View style={{ ...styles.roleContainer, backgroundColor }}>
<Text style={{ ...styles.roleText, color }}>{role}</Text>
</View>
);
Now, everything works perfectly fine, however VS Code underlines the two variables backgroundcolor
and color
in the line const { backgroundColor, color } = setRoleColors(role);
现在,一切正常,但是 VS Code 在
const { backgroundColor, color } = setRoleColors(role);
行中强调了两个变量backgroundcolor
和color
and when I hover over them it shows a message telling me the following:当我对它们进行 hover 时,它会显示一条消息,告诉我以下内容:
Property 'backgroundColor' does not exist on type'{backgroundColor: string; color: string} | undefined
Property 'color' does not exist on type'{backgroundColor: string; color: string} | undefined
Look at your setRoleColors
:看看你的
setRoleColors
:
export const setRoleColors = (role: string) => {
switch (role) {
case "student":
return { backgroundColor: Color.maroon.dark, color: "#fff" };
case "moderator":
return { backgroundColor:"#00ff00", color: "#000"};
case "user":
return { backgroundColor:"#0000ff", color: "#fff";
}
};
If you think about it, it's pretty clear why it might not return an object with a backgroundColor
etc property - if role
is neither student
, nor moderator
, nor user
.如果您考虑一下,很清楚为什么它可能不会返回带有
backgroundColor
等属性的 object - 如果role
既不是student
,也不是moderator
,也不是user
。 That's what TypeScript is warning you about.这就是 TypeScript 警告您的内容。
If you want to indicate that those are the only possible roles, you should make a type for those roles, and indicate that type for role
instead of a string.如果您想指出这些是唯一可能的角色,您应该为这些角色创建一个类型,并为
role
而不是字符串指明该类型。
You could also consider using if
/ else
instead of switch
.您也可以考虑使用
if
/ else
代替switch
。
type Role = 'student' | 'moderator' | 'user';
export const setRoleColors = (role: Role) => {
if (role === 'student') {
return { backgroundColor: Color.maroon.dark, color: "#fff" };
} else if (role === 'moderator') {
return { backgroundColor:"#00ff00", color: "#000"};
} else {
return { backgroundColor:"#0000ff", color: "#fff";
}
};
You'll also need to change UserRole
to indicate that the role should be a Role, and not just a string.您还需要更改
UserRole
以指示该角色应该是一个角色,而不仅仅是一个字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.