I don't know how to implement an enumeration using an interface in the angular2 class

Question

Around here. Very new to Typescript and causes severe headaches with trivial implementations.

How to determine in AgentStatusService that it should have an array of 4 parameters called ['offline','available','busy','away'] ? AgentStatus is defined (or is it?), And I enter it in AgentStatusService .

Visual Studio Code Visual Studio points to line 21 where the type 'typeof AgentStatus' cannot be assigned to the type 'AgentStatus' ... why?

Updated:

 import { EventEmitter, Injectable } from '@angular/core'; export enum AgentStatus { available =1 , busy = 2, away = 3, offline = 0 } export interface IAgentStatusService { state: number states: AgentStatus } @Injectable() export class AgentStatusService implements IAgentStatusService { state:number; // this really should be string, but line 22 returns a number states:AgentStatus; constructor(states:typeof AgentStatus = AgentStatus){ // unreacheable code browser_adapter.ts:78EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'isSkipSelf' of null // absolutely impossible to debug... this.state = AgentStatus.offline // this returns a number } // set state(state:string){ // try{ // this._state = this.states[state]; // // string // } catch(e){ // console.log('tried setting bad enum value on AgentStatus', e.stack); // } // } // get state():string{ // return this._state; // } // get model():any { // return this.states; // } } 

Compare with This implementation satisfies angular2:

 @Injectable() export class AgentStatusService { public states = ['offline','available','busy','away']; private _state; constructor(){ this._state = this.states[0]; } set state(state:string){ try{ this._state = this.states[state]; } catch(e){ console.log('tried setting bad enum value on AgentStatus', e.stack); } } get state():string{ return this._state; } get model():any { return this.states; } } 

Answer 1

It's not obvious what you want here, but let me explain a few things ...

I created a blog post saying this:
How to use TypeScript Enumerations, especially with Angular 2+
But here I will include all the information:

An enumeration is just an object. Enum says something like this in JavaScript:

 { 0: "offline", 1: "available", 2: "busy", 3: "away", available: 1, busy: 2, away: 3, offline: 0 } 

The advantage of input is very limited in transfers.

This line is valid:

 var value = <AgentStatus>"offline"; 

But this is not useful because

 value == AgentStatus.offline // <- false, because it "offline" == 0 

So, you should always store your values ​​as numbers, which you can get as follows:

How to convert a string to an enumeration

 var value = AgentStatus["offline"]; // so value is now 0 // You can also use this, which only gives IDE hints, no runtime benefit var value: AgentStatus = AgentStatus["offline"]; 

This does the previous comparison job:

 value == AgentStatus.offline // <- true, because it 0 == 0 

Now a few questions remain:

How do you get the equivalent of a string?

 AgentStatus.offline // 0 AgentStatus[AgentStatus.offline] // -> AgentStatus[0] -> "offline" 

How can you get all the possible enumeration values?

 var options : string[] = Object.keys(AgentStatus); // The options list has the numeric keys, followed by the string keys // So, the first half is numeric, the 2nd half is strings options = options.slice(options.length / 2); 

Gotcha

If you write this in your template:

 {{AgentStatus[myValue]}} 

It will not work because it does not have access to imported types (it will be executed later by Angular).

To make it work, your component will need to have a reference to the type / enumeration object, for example:

 export class MyComponent { // allows you to use AgentStatus in template AgentStatus = AgentStatus; myValue : AgentStatus; // ... } 

Runnable demo

Here is an example that explains everything I pointed out here:

http://plnkr.co/edit/vOeeDrCI6CmsXdWaMtwG?p=preview

Look in the file: app/app.component.ts .

Answer 2

Visual Studio Code Visual Studio points to line 21 where the type 'typeof AgentStatus' cannot be assigned to the type 'AgentStatus' ... why

You have states:AgentStatus = AgentStatus . Here states:AgentStatus is actually a value of type AgentStatus, where as = AngentStatus is an integer enumeration.

Fix

you probably want:

 states:typeof AgentStatus = AgentStatus 

Or

 states:AgentStatus = AgentStatus.Available 

More details

This is similar to trying to assign foo:SomeClass = SomeClass instead of foo:SomeClass = new SomeClass() .