如何在打字稿中导出数组

Question

在 Angular4 应用程序中，我使用服务来导出应用程序中使用的一些常量、枚举和接口。我想导出一个字符串数组，其键是 anum 中的键。这就是我现在拥有的：

export enum ContextMenus {
  ... (more options)
  OBJECT_COLOR_RED = 120,
  OBJECT_COLOR_GREEN = 121,
  OBJECT_COLOR_BLUE = 122
}

我想根据上面枚举的值导出一个字符串数组，如下所示：

let ObjectStyles : string[];
ObjectStyles[ContextMenus.OBJECT_COLOR_RED] = '#f00';
ObjectStyles[ContextMenus.OBJECT_COLOR_GREEN] = '#0f0'
ObjectStyles[ContextMenus.OBJECT_COLOR_BLUE] = '#00f';

export ObjectStyles; // THIS IS WHAT I DON'T KNOW HOW TO WRITE

我尝试按照论坛中的建议使用export default RulesStyles，但是当我尝试从这样的组件中导入它时：

import { ContextMenus, ObjectStyles } from '../app-options.service';

编译器抱怨模块 'app-options.service 没有导出的成员 ObjectStyles'。

另一个建议的解决方案是像这样导出 ObjectStyles：

export { ObjectStyles };

在这种情况下，编译器不会报错，但应用程序在运行时崩溃并出现以下错误：

TypeError: ObjectStyles is undefined

我怎么能做我想做的事？谢谢！

Answer 1

您已经找到了解决问题的方法（万岁！），但我想提供一些背景信息，说明您的原始代码为何不起作用。让我们看看你尝试编译它时得到的错误信息：

需要声明或声明。

这是因为您尝试导出 文字表达式 ObjectStyles（计算结果为您的对象）。除非您使用 default 导出，否则您不能这样做，否则将没有名称。

相反，您必须导出一个声明，该声明将一个名称引入程序并可选择分配给它。这就是您在回答中所做的 - 您正在声明命名变量 ObjectStyles，导出该变量，然后为其赋值。

您也可以像这样修复原始示例：

// Personally I'd replace the 'let' with a 'const' here
// Also, it's worth noting that ObjectStyles is an object, not an array!
export let ObjectStyles = {};
ObjectStyles[ContextMenus.OBJECT_COLOR_RED] = '#f00';
ObjectStyles[ContextMenus.OBJECT_COLOR_GREEN] = '#0f0'
ObjectStyles[ContextMenus.OBJECT_COLOR_BLUE] = '#00f';

也就是说，您的版本更好 - 只是证明它们在功能上是等效的 :)

Answer 2

我只记得几周前我读到的关于计算属性作为数组键的内容。您必须将它们放在括号之间才能使其正常工作。所以，我可以用这段代码做我想做的事：

export var ObjectStyles = {
  [ContextMenus.OBJECT_COLOR_RED] : '#f00',
  [ContextMenus.OBJECT_COLOR_GREEN] : '#0f0',
  [ContextMenus.OBJECT_COLOR_BLUE] : '#00f'
};

这样做可以让我从应用程序的每个组件中导入和使用 ObjectStyles。