Объект, возможно, "не определен" при инициализации переменной Typescript

#angular #typescript #undefined

#angular #typescript #не определено

Вопрос:

В моем приложении есть такой компонент:

 @Component({
  selector: 'app-payment-intent',
  templateUrl: './payment-intent.component.html',
  styleUrls: ['./payment-intent.component.css']
})
export class PaymentIntentComponent implements OnInit {

  static = false;
  @ViewChild(StripeCardComponent, this.static) card: StripeCardComponent;

Но когда я пытаюсь скомпилировать приложение, я получаю

 Object is possibly 'undefined'

Ошибка заключается в переменной static = false , которая @ViewChild(StripeCardComponent, this.static) card вызывает получение переменной, насколько это возможно undefined , но, как вы можете видеть, переменная не undefined является переменной, переменная является логическим инициализированным false ..

Что я могу сделать, чтобы решить эту проблему?

Спасибо!

1. Вы можете попробовать определить его как static: boolean = false; . Но проблема может заключаться в том, что это static зарезервированное слово, поэтому вы можете переименовать свою переменную.

Ответ №1:

@ViewChild , в данном случае, является декоратором. Чтобы понять проблему, вам нужно понять, как работают декораторы и как они применяются к методам.

Исходный код:

 function decorator(value?:any) {
  return function <T>(target: unknown, propertyKey: string, descriptor: TypedPropertyDescriptor<T>): void {
    console.log('value:', value);
  };
}

class Bar {
    @decorator(this)
    public foo():void {}
}

Скомпилированный код:

 // __decorate and __metadata declarations skipped

function decorator(value) {
  return function (target, propertyKey, descriptor) {
    console.log('value:', value);
  };
}

class Bar {
  foo() { }
}

__decorate([
  decorator(this),
  __metadata("design:type", Function),
  __metadata("design:paramtypes", []),
  __metadata("design:returntype", void 0)
], Bar.prototype, "foo", null);

После компиляции этого кода вы можете видеть, что декораторы изменяют класс прототипа, а не его экземпляр. Таким образом, «this» в аргументе «this.static», который вы передаете декоратору, указывает на отсутствие контекста, и поэтому его значение не определено.

Ответ №2:

Вы можете обратиться к миграции статических запросов Angular, где показано, что @ViewChild 2-й параметр — { static: boolean } type, поэтому вам следует отредактировать свой на:

 @ViewChild(StripeCardComponent, { static: this.static }) card: StripeCardComponent;

или гораздо лучше назначить его напрямую, поскольку это условие будет применяться при инициализации:

 @ViewChild(StripeCardComponent, { static: false }) card: StripeCardComponent;