[英]Typescript Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
Trying to get some data for a modal based on a feature
name.尝试根据
feature
名称获取模式的一些数据。 The feature itself is a string coming from an API.该功能本身是来自 API 的字符串。 The
messages
object is for translating the strings in other countries. messages
object 用于翻译其他国家的字符串。
import { defineMessages } from 'react-intl';
messages = defineMessages({
userLimitsHeading: {
defaultMessage: 'User limits',
},
userLimitsSubheading: {
defaultMessage: 'Get the flexibility to grow your team beyond 10 users.',
},
agentLimitHeading: {
defaultMessage: 'Agent limits',
},
agentLimitSubheading: {
defaultMessage: 'Get the flexibility to grow your team beyond 3 agents.',
},
});
interface ModernizedPlanSelectionModalTypes {
feature: string;
}
const getData = (feature) => {
const heading = messages[`${feature}Heading`];
const subHeading = messages[`${feature}Subheading`];
return {
heading,
subHeading,
};
}
I'm getting 2 typescript errors in the getData function, specifically in the bit where I grab the message with the concatenated string key:我在 getData function 中收到 2 个 typescript 错误,特别是在我使用连接字符串键获取消息的位中:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'userLimitsHeading: { id: string; description: string; defaultMessage: string; }; userLimitsSubheading: { id: string; description: string; defaultMessage: string; }; ... //Continues on for the rest of them
No index signature with a parameter of type 'string' was found on type ' userLimitsHeading: { id: string; description: string; defaultMessage: string; }; userLimitsSubheading: { id: string; description: string; defaultMessage: string; }; //Continues on for the rest of them'
You need to add an explicit type assertion to get around this like so:您需要添加一个显式类型断言来解决这个问题,如下所示:
const getData = (feature: string) => {
const heading = messages[`${feature}Heading` as keyof typeof messages]
const subHeading = messages[`${feature}Subheading` as keyof typeof messages]
return {
heading,
subHeading,
}
}
The root of the issue is that the keys in the messages
variable is typed as问题的根源是
messages
变量中的键键入为
'userLimitsHeading' | 'userLimitsSubheading' | 'agentLimitHeading' | 'agentLimitSubheading'
which is a narrow subset of string
.这是
string
的一个窄子集。
${feature}Heading
however is typed to string
- the error message is telling you that you cannot use just any string
to reference keys in the object. ${feature}Heading
被输入到string
- 错误消息告诉您不能使用任何string
来引用 object 中的键。
Typescript 4.1 however adds support for template literal types, so this may no longer be required if you're able to upgrade your environment to use this. Typescript 4.1 但是添加了对模板文字类型的支持,因此如果您能够升级您的环境以使用它,则可能不再需要它。
See also https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html另见https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.