Ошибка "this" неявно имеет тип "any" из-за отсутствия аннотации типа в TypeScript

Причина ошибки

Ошибка возникает из-за того, что внутри callback-функции, переданной в forEach, контекст this теряет связь с экземпляром класса TaskList. TypeScript в строгом режиме требует явной аннотации типа для this, если он используется внутри обычной функции (не стрелочной).

Когда вы пишете:

this.tasks.forEach(function(task) {
  console.log(`${task} - added by ${this.name}`);
});

— this внутри callback ссылается на глобальный объект (в браузере — window) или undefined в строгом режиме, а не на экземпляр класса. TypeScript видит, что this не имеет аннотации типа, и выводит ошибку.

Решение 1: Использовать стрелочную функцию

Самый простой способ — заменить обычную функцию на стрелочную. Стрелочные функции не имеют собственного this, они наследуют его из внешнего контекста (в данном случае — из метода printTasks, где this — экземпляр класса).

class TaskList {
  tasks: string[] = [];
  name: string = "Task Manager";

  addTask(task: string) {
    this.tasks.push(task);
    console.log(`Added: ${task}`);
  }

  printTasks() {
    this.tasks.forEach((task) => {
      console.log(`${task} - added by ${this.name}`);
    });
  }
}

Теперь this.name будет корректно ссылаться на свойство name класса. Обратите внимание: я добавил свойство name в класс, чтобы пример работал.

Решение 2: Явная аннотация типа this

Если по какой-то причине вы не можете использовать стрелочную функцию (например, вам нужен собственный контекст this), вы можете явно указать тип this как первый параметр callback-функции:

class TaskList {
  tasks: string[] = [];
  name: string = "Task Manager";

  addTask(task: string) {
    this.tasks.push(task);
  }

  printTasks() {
    this.tasks.forEach(function(this: TaskList, task: string) {
      console.log(`${task} - added by ${this.name}`);
    }.bind(this));
  }
}

Здесь мы:

• Добавляем параметр this: TaskList в начало списка параметров callback-функции — это говорит TypeScript, что this внутри функции должен быть экземпляром TaskList.
• Используем .bind(this), чтобы привязать правильный контекст во время выполнения.

Решение 3: Сохранить ссылку на this во внешней переменной

Классический JavaScript-подход, который также работает в TypeScript:

class TaskList {
  tasks: string[] = [];
  name: string = "Task Manager";

  printTasks() {
    const self = this;
    this.tasks.forEach(function(task) {
      console.log(`${task} - added by ${self.name}`);
    });
  }
}

Здесь мы сохраняем ссылку на this в переменную self (или that), и используем её внутри callback. TypeScript не выдаёт ошибку, потому что self — обычная переменная с типом TaskList.

Рекомендация

Для современного TypeScript-кода предпочтительнее использовать стрелочные функции — это наиболее читаемый и безопасный способ. Явная аннотация this полезна в случаях, когда вы пишете утилитарные функции или работаете с библиотеками, которые требуют определённого контекста.

class TaskList {
  tasks: string[] = [];
  name: string = "Task Manager";

  private logTask(task: string) {
    console.log(`${task} - added by ${this.name}`);
  }

  printTasks() {
    this.tasks.forEach(this.logTask.bind(this));
  }
}

{
  "compilerOptions": {
    "noImplicitThis": false
  }
}