Search code examples
reactjstypescriptreact-tsx

typing in a for loop react+typescript?


i have this interface of a Todo:

export interface InitialTodoLoadingState {
  toggleComplete: boolean;
  updateText: boolean;
  deleteTodo: boolean;
}
export interface Todo {
  complete: boolean;
  _id: string;
  text: string;
  loading: InitialTodoLoadingState;
}

i am trying to loop an array of todos objects like this:

const processing = todos // check if processing operations e.g.: toggle complete
      .map((todo: TodoInterface) => {
        for (let loadProp in todo.loading) {
          if (todo.loading[loadProp]) return true; // ERROR HERE
          return false;
        }
      })
      .some(process => !!process);

I am getting an error saying:

Element implicitly has an 'any' type because type 'InitialTodoLoadingState' has no index signature.

how do i implement typescript here? I don't want to use any


Solution

  • To remove the error, add an index signature (see here):

    export interface InitialTodoLoadingState {
      toggleComplete: boolean;
      updateText: boolean;
      deleteTodo: boolean;
      [key: string]: boolean;
    }