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

Question

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

我有一个学生界面：

export interface Student extends User

我希望提供商 return 类型 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

这是联合的标准行为：除非你做一些事情来检查你正在处理的是什么类型，打字稿将只允许你访问 all 成员上存在的属性工会

以下是一些可以缩小类型范围的示例。您可以检查属性是否存在：

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);
}

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

How to declare variable of type A or B when one extends the other in Typescript

interface

typescript

reactjs

react-typescript