Ошибка Property has no initializer в TypeScript: как исправить?

Понимание проблемы

Ошибка Property has no initializer and is not definitely assigned in the constructor появилась в TypeScript 2.7 с включением опции strictPropertyInitialization. Эта опция входит в состав strict: true и требует, чтобы все свойства класса были либо инициализированы при объявлении, либо явно присвоены в конструкторе. TypeScript не учитывает методы жизненного цикла Angular (например, ngOnInit) или декораторы (@Input) — он анализирует только конструктор.

Решение 1: Оператор "!" (definite assignment assertion)

Самый простой и распространённый способ — использовать оператор ! после имени свойства. Это говорит TypeScript: "Я знаю, что это свойство будет инициализировано позже, не проверяй его". Однако будьте осторожны — вы берёте на себя ответственность за то, что свойство точно будет установлено до первого использования.

export class UserComponent {
  @Input() user!: User;
  public userName!: string;
  private id!: number;

  constructor() {
    // Теперь TypeScript не ругается
  }

  ngOnInit() {
    this.userName = this.user.name;
    this.id = this.user.id;
  }
}

Решение 2: Инициализация в конструкторе

Если вы хотите быть максимально строгими и избежать оператора !, можно инициализировать свойства прямо в конструкторе. Для свойств, которые приходят из @Input, это не всегда удобно, но для внутренних свойств — отличный вариант:

export class UserComponent {
  @Input() user: User = {} as User; // Пустой объект с приведением типа
  public userName: string = '';
  private id: number = 0;

  constructor() {
    // Всё инициализировано — ошибок нет
  }

  ngOnInit() {
    this.userName = this.user.name;
    this.id = this.user.id;
  }
}

Решение 3: Использование интерфейса с optional properties

Если свойство может быть undefined (например, пока не пришли данные), лучше сделать его опциональным:

export class UserComponent {
  @Input() user?: User; // Может быть undefined
  public userName?: string;
  private id?: number;

  constructor() {
    // Всё хорошо, все свойства опциональны
  }

  ngOnInit() {
    if (this.user) {
      this.userName = this.user.name;
      this.id = this.user.id;
    }
  }
}

Решение 4: Отключить strictPropertyInitialization (не рекомендуется)

Можно отключить эту проверку в tsconfig.json, но это лишит вас полезной защиты от ошибок:

{
  "compilerOptions": {
    "strictPropertyInitialization": false
  }
}

Что выбрать?

• Для @Input свойств — используйте оператор ! или сделайте свойство опциональным (?). Это наиболее идиоматично для Angular.
• Для внутренних свойств — лучше инициализируйте их значением по умолчанию (пустая строка, 0, null и т.д.). Это делает код более предсказуемым.
• Оператор ! — удобен, но помните: если вы забудете установить значение, получите undefined во время выполнения.

В вашем случае я рекомендую использовать оператор ! для @Input() user (так как Angular гарантирует, что он будет установлен до ngOnInit) и инициализировать userName и id пустыми значениями в конструкторе.

export class UserComponent {
  @Input() user: User | null = null;

  get userName(): string {
    return this.user?.name ?? '';
  }

  get id(): number {
    return this.user?.id ?? 0;
  }

  constructor() {
    // Ничего не нужно инициализировать — геттеры всё вычисляют
  }
}