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!

Does this answer your question? Export array to be used in another javascript file — Michael Freidgeim
– Michael Freidgeim, Commented May 21, 2020 at 21:17

Fel · Accepted Answer · 2018-01-09 10:09:10Z

10

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.

answered Jan 9, 2018 at 10:09

Fel

4,89812 gold badges46 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amit Gaikwad Over a year ago

same thing u could have done with array. export let ObjectStyles : string[] = []; ObjectStyles[ContextMenus.OBJECT_COLOR_RED] = '#f00'; ObjectStyles[ContextMenus.OBJECT_COLOR_GREEN] = '#0f0' ObjectStyles[ContextMenus.OBJECT_COLOR_BLUE] = '#00f';

samneric Over a year ago

nice, although modern typescript makes you use 'const' instead of 'var'

Joe Clay · Accepted Answer · 2018-01-09 10:20:01Z

10

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

answered Jan 9, 2018 at 10:20

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

1 Comment

Fel Over a year ago

Hi! I've tried your solution and it works as expected, thank you for taking the time to explain it, now I understand what the problem was and I learned a new thing about Typescript! ;)

Graciousfate · Accepted Answer · 2022-08-28 11:21:51Z

8

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

answered Aug 28, 2022 at 11:21

Graciousfate

911 silver badge2 bronze badges

Comments

Thomas David Kehoe · Accepted Answer · 2022-12-13 21:31:50Z

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.

Collectives™ on Stack Overflow

How to export an array in typescript

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related