如何在 Typescript 中扩展另一个时声明 A 或 B 类型的变量

Question

我有一个上下文提供程序，可以在整个应用程序中传输用户数据。

我有一个学生界面：

export interface Student extends User

我希望提供者返回Student或User类型的用户数据，如下所示：

let userData: Student | User = null;

当尝试访问仅对学生可用的属性userData?.currentTeam时，VS Code 会引发以下错误：

Property 'currentTeam' does not exist on type 'Student | User'.
  Property 'currentTeam' does not exist on type 'User'.ts(2339)

我需要帮助找出为什么它默认为父界面以及如何允许两者的选项。

Answer 1

这是联合体的标准行为：除非您检查所处理的类型，否则 typescript 将只允许您访问联合体所有成员上存在的属性。

以下是一些如何缩小类型范围的示例：

if ('currentTeam' in userData) {
  console.log(userData.currentTeam);
}

或者：

if (userData instanceof Student) {
  console.log(UserData.currentTeam);
}

或者，更改类型，使对象具有说明它们是什么类型的属性，这使您可以执行“有区别的联合”

interface User {
  type: 'user',
  // rest of the type here
}

interface Student extends User {
  type: 'student',
  currentTeam: // something,
  // rest of the type here
}

if (userData.type === 'student) {
  console.log(userData.currentTeam);
}