typescript 如何在打字稿中导出数组
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/48165514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to export an array in typescript
提问by Fel
In an Angular4 app, I use a service to export some constants, enums and interfaces used all across the application. I'd like to export an array of strings whose keys are the keys in an anum. This is what I have right now:
在 Angular4 应用程序中,我使用一个服务来导出整个应用程序中使用的一些常量、枚举和接口。我想导出一个字符串数组,其键是 anum 中的键。这就是我现在所拥有的:
export enum ContextMenus {
... (more options)
OBJECT_COLOR_RED = 120,
OBJECT_COLOR_GREEN = 121,
OBJECT_COLOR_BLUE = 122
}
I'd like to export an array of strings based on the values of the enum above, like this:
我想根据上面枚举的值导出一个字符串数组,如下所示:
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
I've tried using export default RulesStyles
as suggested in a forum, but when I try to import it from a component like this:
我试过export default RulesStyles
按照论坛中的建议使用,但是当我尝试从这样的组件中导入它时:
import { ContextMenus, ObjectStyles } from '../app-options.service';
The compiler complains that the module 'app-options.service has no exported member ObjectStyles'.
编译器抱怨模块“app-options.service 没有导出成员 ObjectStyles”。
Another proposed solution was to export ObjectStyles like this:
另一个提议的解决方案是像这样导出 ObjectStyles:
export { ObjectStyles };
In this case, the compiler doesn't complain, but the app crashes at runtime with the following error:
在这种情况下,编译器不会抱怨,但应用程序在运行时崩溃并出现以下错误:
TypeError: ObjectStyles is undefined
How could I do what I want? Thanks!
我怎么能做我想做的事?谢谢!
回答by Joe Clay
You've already found a solution to your problem (hooray!), but I'd like to give some context as to why your original code didn't work. Let's look at the error message you get when you try to compile it:
您已经找到了问题的解决方案(万岁!),但我想提供一些关于为什么您的原始代码不起作用的上下文。让我们看一下尝试编译时得到的错误消息:
Declaration or statement expected.
预期的声明或声明。
This is appearing because you're trying to export the literal expressionObjectStyles
(which evaluates to your object). You can't do that unless you use the default
export, because otherwise there would be no name attached to it.
出现这种情况是因为您试图导出文字表达式ObjectStyles
(计算结果为您的对象)。除非您使用default
导出,否则您不能这样做,否则将没有名称附加到它。
Instead, you have to export a declaration, which introduces a name into the program and optionally assigns to it. This is what you've done in your answer - you're declaring the named variable ObjectStyles
, exporting that variable, and then assigning a value to it.
取而代之的是,您必须导出一个声明,该声明将一个名称引入到程序中并可以选择为其赋值。这就是您在答案中所做的 - 您正在声明命名变量ObjectStyles
,导出该变量,然后为其分配一个值。
You could have also fixed your original example like this:
您也可以像这样修复原始示例:
// 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';
That said, your version is nicer - just demonstrating that they're functionally equivalent :)
也就是说,你的版本更好 - 只是证明它们在功能上是等效的 :)
回答by Fel
I just remembered something I read some weeks ago about computed properties as array keys. You must put them between brackets to make it work. So, I could do what I want using this code:
我只记得几周前我读到的一些关于将计算属性作为数组键的内容。您必须将它们放在括号之间才能使其工作。所以,我可以使用以下代码做我想做的事:
export var ObjectStyles = {
[ContextMenus.OBJECT_COLOR_RED] : '#f00',
[ContextMenus.OBJECT_COLOR_GREEN] : '#0f0',
[ContextMenus.OBJECT_COLOR_BLUE] : '#00f'
};
Doing this allows me to import and use ObjectStyles from every component in the app.
这样做允许我从应用程序中的每个组件导入和使用 ObjectStyles。