Question

我有如下的 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 ...

如何在打字稿中写下这一行？

const colorStyle = color && argonTheme.COLORS[color.toUpperCase()];

Answer 1

您必须为 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()];

A working example here。

Answer 2

我认为最好的选择是让枚举与您拥有的该对象的属性相匹配，将键声明为字符串是一种松散的解决方案，它可能允许您拥有不存在的键。

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);

或者甚至考虑杀死 COLOR 对象并只有一个枚举

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];

Answer 3

为你的 COLORS 设置一个类型，否则默认设置 any 类型：

在你的情况下它的 stringkey 与 string value ，因此应该看起来像

export default {
    const COLORS :{ [key: string]: string } =  {
      DEFAULT: '#172B4D',
      PRIMARY: '#5E72E4',
      SECONDARY: '#F7FAFC',
    }
};

打字稿动态访问对象键

3 个答案: