Typescript动态访问对象键
Typescript动态访问对象键
提问于 2021-01-25 18:48:37
我有如下所示的Theme.ts文件
export default {
COLORS: {
DEFAULT: '#172B4D',
PRIMARY: '#5E72E4',
SECONDARY: '#F7FAFC',
}
};在我的按钮组件中，我像这样导入了上面的主题文件--> import argonTheme from "../constants/Theme";
在我按钮组件中，我想像这样动态地访问该颜色
const { small, shadowless, children, color, style, fontSize } = props;
const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];这一行给我打字错误--> const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];
这就是我得到的错误
Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ DEFAULT: string; PRIMARY: string; SECONDARY: string ...我如何在typescript中写这行？
const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];回答 3
Stack Overflow用户
回答已采纳
发布于 2021-01-25 18:52:33
您必须为COLORS对象提供一个类型：
// Theme.ts
const COLORS: Record<string, string> = {
DEFAULT: '#172B4D',
PRIMARY: '#5E72E4',
SECONDARY: '#F7FAFC',
}
export default { COLORS };
// Other Component:
const color= 'PRIMARY';
const colorStyle = color && COLORS[color.toUpperCase()];Stack Overflow用户
发布于 2021-01-25 19:05:05
我认为最好的选择是让一个枚举与你拥有的对象的属性相匹配，将键声明为string是一种松散的解决方案，它可能会让你拥有一个不存在的键。
enum ColorOptions {
DEFAULT = 'DEFAULT',
PRIMARY = 'PRIMARY',
SECONDARY = 'SECONDARY',
}然后你就可以安全地这样做了
const colorStyle = color && COLORS[ColorOptions.SECONDARY];
完整代码：
const COLORS = {
DEFAULT: '#172B4D',
PRIMARY: '#5E72E4',
SECONDARY: '#F7FAFC',
}
enum ColorOptions {
DEFAULT = 'DEFAULT',
PRIMARY = 'PRIMARY',
SECONDARY = 'SECONDARY',
}
const color = ColorOptions.PRIMARY;
const colorStyle = color && COLORS[color];
console.log(colorStyle);或者甚至可以考虑取消颜色对象，只使用枚举
export enum COLORS {
DEFAULT = '#172B4D',
PRIMARY = '#5E72E4',
SECONDARY = '#F7FAFC',
}
console.log(colorStyle); // #5E72E4或者，如果您的代码已经在验证color输入，而您只想触及该行并关闭TS，则可以：
const colorStyle = color && argonTheme.COLORS[color.toUpperCase() as keyof typeof COLORS]; Stack Overflow用户
发布于 2021-01-25 18:57:57
为您的颜色设置一个类型，否则默认设置为any类型：
在您的例子中，它的字符串键带有字符串值，因此应该如下所示
export default {
const COLORS :{ [key: string]: string } = {
DEFAULT: '#172B4D',
PRIMARY: '#5E72E4',
SECONDARY: '#F7FAFC',
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65883236
复制相关文章
相似问题
腾讯云开发者
