如何确保 (input) class 属性不是未定义的？

Question

当我使用 Angular 和 TypeScript 时，我会尝试尽可能精确和严格地编写我的代码。查看一些较旧的代码，我遇到了这样的片段：

export class UserComponent {

    @Input() user: User;

    getName(): string {
        return this.user.firstname + " " + this.user.lastname;
    }

}

某处，该组件使用如下：

<user-component [user]="u"></user-component>

显然，此类组件旨在显示用户，整个 GUI 取决于用户实例（值）。

编译器不会抱怨此定义，即使属性 user 可能未定义。但是，如果另一个开发人员忘记将输入属性 user 传递给此组件，则会在运行时出现错误：Trying to access firstname of undefined.

你是如何解决这个问题的？就个人而言，如果在 custructor 中未定义属性，编译器会抛出错误，我更愿意这样做。或者有没有办法 "force" 一个输入属性，这样 compiler/Angular 如果在使用组件时没有给出 CLI 就会失败？

到目前为止，我只看到以下选项：

1) 定义用户属性为@Input() user: User | undefined。然后，我们必须在每个使用用户属性的方法中写一个繁琐的if/else。

2) 定义@Input() user: User = new User()。但是，我仍然需要以某种方式检查我们是否在许多用途中有一个有效的用户实例。

Answer 1

最简单的方法是使用模板中的安全导航操作符。 https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

{{user?.firstname}} 不会抛出错误。

如果您需要检查输入，您可以使用 setter。

@Input() set user(user: User) {
  if (user) ...

Answer 2

一个可能对您有用的技巧是在选择器中定义组件及其所有必填字段。在你的情况下它将是

@Component({
  selector: 'user-component[user][anotherRequiredField]'
})

如何确保 (input) class 属性不是未定义的？

How to make sure that (input) class properties are not undefined?

undefined

typescript

angular