Utilizing TypeScript 3.1: Easier Array Indexing with Enums in Strict Mode

Question

Utilizing TypeScript 3.1: Easier Array Indexing with Enums in Strict Mode

Enabling TypeScript "strict" mode with "noImplicitAny" causes this code to fail compilation.

I am looking for guidance on how to properly declare and use Arrays indexed by Enum values.

namespace CommandLineParser {
    enum States { sNoWhere, sSwitchValue }

    abstract class State {        
    }

    class NoWhereState extends State {

    }

    class SwitchValueState extends State {

    }

    export class GetOption {
        state: State;
        states: Array<State>[States];

        constructor() {
            this.states = new Array(2);
            this.states[States.sNoWhere] = new NoWhereState();
            this.states[States.sSwitchValue] = new SwitchValueState();
            this.state = this.states[States.sNoWhere];
        }
    }
}

let go = new CommandLineParser.GetOption();

The errors encountered are :

error TS7017: Element implicitly has an 'any' type because type 'State' has no index signature.

          this.states[States.sNoWhere] = new NoWhereState(this);
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error TS7017: Element implicitly has an 'any' type because type 'State' has no index signature.

          this.states[States.sSwitchValue] = new SwitchValueState(this);
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error TS7017: Element implicitly has an 'any' type because type 'State' has no index signature.

          this.state = this.states[States.sNoWhere];
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

typescript

Answer 1

Answer №1

Although this may seem a bit outdated and not directly addressing the question, I personally find it more intuitive to use objects instead of arrays in situations like yours. Take into consideration the following approach:

enum MyIndexingEnum { stateOne, stateTwo }
const someIndexedObject {
  [MyIndexingEnum.stateOne]: { /* data */ }
  [MyIndexingEnum.stateTwo]: { /* data */ }
}

/* Retrieving data */
someIndexedObject[MyIndexingEnum.stateOne]

Answer 2

Although this may seem a bit outdated and not directly addressing the question, I personally find it more intuitive to use objects instead of arrays in situations like yours. Take into consideration the following approach:

enum MyIndexingEnum { stateOne, stateTwo }
const someIndexedObject {
  [MyIndexingEnum.stateOne]: { /* data */ }
  [MyIndexingEnum.stateTwo]: { /* data */ }
}

/* Retrieving data */
someIndexedObject[MyIndexingEnum.stateOne]

Answer 3

Answer №2

The issue lies in the data type of states. Initially, you define an array of type State, but later on, you utilize a type query which results in just State. The statement this.states = new Array(2); is successful because the State class does not have any members, allowing the array to technically fulfill the class signature.

To rectify this problem, consider the following solution:

export class GetOption {
    state: State;
    states: Array<State>;

    constructor() {
        this.states = new Array(2);
        this.states[States.sNoWhere] = new NoWhereState();
        this.states[States.sSwitchValue] = new SwitchValueState();
        this.state = this.states[States.sNoWhere];
    }
}

It should be noted that with this approach, you can access the array using any number, not just limited to enum types, which may not align with your requirements. Alternatively, if you do not require the array methods, utilizing a simple object might be more suitable, albeit requiring initialization at once (or you can use a type assertion like this.states = {} as any):

export class GetOption {
    state: State;
    states: Record<States, State>;

    constructor() {
        this.states = {
            [States.sNoWhere]: new NoWhereState(),
            [States.sSwitchValue] : new SwitchValueState()
        }
        this.state = this.states[States.sNoWhere];
        this.state = this.states[10]; //error
    }
}

Another viable option would be to use a tuple type since the enum constants correspond to numbers, and it offers access to array methods if needed:

export class GetOption {
    state: State;
    states: [State, State];

    constructor() {
        this.states = [new NoWhereState, new SwitchValueState]
        this.state = this.states[States.sNoWhere];
        this.state = this.states[10]; //error
    }
}

Answer 4

The issue lies in the data type of states. Initially, you define an array of type State, but later on, you utilize a type query which results in just State. The statement this.states = new Array(2); is successful because the State class does not have any members, allowing the array to technically fulfill the class signature.

To rectify this problem, consider the following solution:

export class GetOption {
    state: State;
    states: Array<State>;

    constructor() {
        this.states = new Array(2);
        this.states[States.sNoWhere] = new NoWhereState();
        this.states[States.sSwitchValue] = new SwitchValueState();
        this.state = this.states[States.sNoWhere];
    }
}

It should be noted that with this approach, you can access the array using any number, not just limited to enum types, which may not align with your requirements. Alternatively, if you do not require the array methods, utilizing a simple object might be more suitable, albeit requiring initialization at once (or you can use a type assertion like this.states = {} as any):

export class GetOption {
    state: State;
    states: Record<States, State>;

    constructor() {
        this.states = {
            [States.sNoWhere]: new NoWhereState(),
            [States.sSwitchValue] : new SwitchValueState()
        }
        this.state = this.states[States.sNoWhere];
        this.state = this.states[10]; //error
    }
}

Another viable option would be to use a tuple type since the enum constants correspond to numbers, and it offers access to array methods if needed:

export class GetOption {
    state: State;
    states: [State, State];

    constructor() {
        this.states = [new NoWhereState, new SwitchValueState]
        this.state = this.states[States.sNoWhere];
        this.state = this.states[10]; //error
    }
}

Utilizing TypeScript 3.1: Easier Array Indexing with Enums in Strict Mode

Answer №1

Answer №2

Similar questions

Tips for utilizing the 'crypto' module within Angular2?

Is it possible to set the state of my datepicker to a previous value only if the new one is determined to be invalid?

Error in Typescript for a function that accepts several types of lists - property does not exist on the interface

Issue with Value Update in Angular 7 Reactive Forms

Deliver transcluded data to the descendant element of a hierarchical roster

Error with Angular 2 observables in TypeScript

The error message "Property not found on type 'Product | Customer' in React Typescript" is indicating that the specified property does not exist on the

Utilize TypeScript function types in React for enhanced functionality

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Effortlessly adding custom classes in Angular 2 with a breeze

The state update is triggering a soft refresh of the page within Next.js

Can you explain the rule known as the "next-line" in TypeScript?

The function 'appendChild' is not recognized on the type 'unknown'.ts(2339)

The error message "Property '...' is not found on the type 'ServerContextJSONValue'" pops up whenever I try to utilize the useContext() function

Testing Slack's Web API with Jest for mock purposes

Encountering a new challenge in Angular: The error "InvalidPipeArgument: '' for pipe 'AsyncPipe'

Incorporating an alternate object array to update an array of objects: A

What's causing the subscription feature to malfunction in a fresh browser tab?

Discover a Simple Trick to Enhance tsc Output: Unveil the Art of

Issues with user-generated input not properly functioning within a react form hook