CODEWITHSUNDEEP
angulartypescript
Fel
Fel

Reputation: 4818

How to export an array in typescript

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!

Upvotes: 20

Views: 43087

Answers (4)

Thomas David Kehoe
Thomas David Kehoe

Reputation: 10930

I'm answering the general question expressed in the title, not the specifics of the OP's code. To export an array with TypeScript, make the module:

10000_English_Words.ts

const thousandsOfWords:string[] = ['the', 'of', 'and', 'to', 'a', 'in'];

export default thousandsOfWords;

Import the array into your program:

index.ts

import thousandsOfWords from './10000_English_Words';

Now you can use thousandsOfWords in your code as if it were part of index.ts.

If you haven't set up automatic declarations:

tsconfig.json

"compilerOptions": {
    "declaration": true,
    "declarationDir": "./types"
},

then you may also need to make a type declaration file:

types/10000_English_Words/1000_English_Words.d.ts

declare module '10000_English_Words'

npm run build should transpile this code TypeScript into JavaScript without errors.

Upvotes: 2

Graciousfate
Graciousfate

Reputation: 91

In typescript you can do it like so, make a file call it whatever you want then make an export const or var

export const someArray:string[] = [
"Initiated",
"Done"

]`

Then in the file you need it you can import it

import { fontTypes } from "../somwhere";

Upvotes: 8

Joe Clay
Joe Clay

Reputation: 35797

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

Upvotes: 9

Fel
Fel

Reputation: 4818

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.

Upvotes: 10

Related Questions