Angular 如何确保（输入）类属性未定义？

当我使用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

传递到此组件，则在运行时将出现错误：

尝试访问未定义的

的名字

你如何解决这个问题？就我个人而言，如果没有在custructor中定义属性，我更希望编译器抛出错误。或者，是否有一种方法可以“强制”输入属性，以便在使用组件时如果未给出编译器/Angular CLI，编译器/Angular CLI将失败

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

1） 将用户属性定义为

@Input（）用户：用户|未定义

。然后，我们必须在每个使用user属性的方法中编写一个麻烦的if/else

---

2） 定义

@Input（）用户：用户=新用户（）

。但是，我仍然需要检查我们是否在许多用途中使用了有效的用户实例。

最简单的方法是使用模板中的安全导航操作符

{{user？.firstname}}

不会引发错误

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

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

---

最简单的方法是在模板中使用安全导航操作符

{{user？.firstname}}

不会引发错误

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

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

---

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

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

---

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

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

---

---

您是否在

tsconfig.json

中打开了

strict

选项？您是否接受任何在编译期间不起作用但在运行时没有[user]输入的情况下使用组件时会失败的运行时检查？您好@WongJiaHau，我实际上不知道这个选项。我只有strictNullChecks=true。您可能会找到一个可能的答案您是否在

tsconfig.json

中打开了

strict

选项？您是否接受任何在编译期间不起作用但在运行时没有[user]输入的情况下使用组件时会失败的运行时检查？您好@wongjiahu，我实际上不知道这个选项。我只有strictNullChecks=true。当然，您可以找到一个可能的答案，在模板中，我们有

{{user？.firstname}

的“nice”语法。在组件（类）中，我们仍然必须在每次使用时检查用户值。setter的定义很清楚。但是，通过使用严格模式，这是不必要的？严格模式将抛出错误，而不是阻止它。它将在编译时使用typescript强制执行类型。需要处理运行时在输入中显示（或不显示）的数据，并检查错误条件。当然，在模板中，我们有

{{user？.firstname}

的“nice”语法。在组件（类）中，我们仍然必须在每次使用时检查用户值。setter的定义很清楚。但是，通过使用严格模式，这是不必要的？严格模式将抛出错误，而不是阻止它。它将在编译时使用typescript强制执行类型。需要处理运行时在输入中显示（或不显示）的数据，并检查错误条件。这是否会阻止开发人员使用没有属性的组件？我不知道！如果这行得通，那太好了！事实上，编译器说选择器是未知的。错误消息有点奇怪，但它确实存在。它说：

错误NG8002:无法绑定到“optionalProperty”，因为它不是“用户组件”的已知属性。

。我跳过了

user

属性，错误消息说可选属性不是已知属性。它是为其他目的创建的，因此Idk是否有更好的方法。它只是不允许在没有必要的道具的情况下使用组件，我认为如果不在angular Logic内部进行粗暴的干扰，就不可能改进错误消息。我会接受你的答案，因为它最好地回答了这个问题。然而，我喜欢学习

严格的
模式，这也将有助于解决这个问题。这是否会阻止开发人员使用没有属性的组件？我不知道！如果这行得通，那太好了！事实上，编译器说选择器是未知的。错误消息有点奇怪，但它确实存在。它说：
错误NG8002:无法绑定到“optionalProperty”，因为它不是“用户组件”的已知属性。
。我跳过了
user
属性，错误消息说可选属性不是已知属性。它是为其他目的创建的，因此Idk是否有更好的方法。它只是不允许在没有必要的道具的情况下使用组件，我认为如果不在angular Logic内部进行粗暴的干扰，就不可能改进错误消息。我会接受你的答案，因为它最好地回答了这个问题。然而，我喜欢学习
严格的
模式，这也将有助于解决这个问题。