How to export an array in typescript

Question

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:

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:

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

The compiler complains that the module 'app-options.service has no exported member ObjectStyles'.

Another proposed solution was to export ObjectStyles like this:

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!

Answer 1

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.

Answer 2

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 expression ObjectStyles (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.

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.

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