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

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

What kind of type is recommended to use when working with async dispatch in coding?

Using React MUI Select in combination with react-hook-form does not seem to be compatible with Cypress testing

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

What is the process for importing WebAssembly functions into TypeScript?

Is there a way to invoke a function within a mat-error element?

Tips for bypassing arrow functions when sending prop values to another component?

Omit functions from category

The member 'email' is not found in the promise type 'KindeUser | null'

Is it possible to customize webpack 4 modules in order to enable Jasmine to spy on their properties?

Uploading multiple files simultaneously in React

Change prompt-sync from require to import syntax

Displaying the ngFor data in the HTML section

Creating a TypeScript interface where the type of one property is based on the type of another property

Ways to access UserProfile in a different Dialogio

Difficulty Determining Literal Types that Expand a Union of Basic Data Types

Angular - Customizing button bindings for various functions

Launching npm start does not automatically open a browser tab

Here's a way to resolve the issue: ReactDOM.render() - TS2345 error: Cannot assign type '() => Element' to type 'ReactElement' in the argument

What are the distinctions between using getStaticPaths + getStaticProps and useRouter in NextJS?