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

Question

I have a context provider which streams user data throughout the app.

I have a Student interface:

export interface Student extends User

I would like the provider to return user data of type Student or User as follows:

let userData: Student | User = null;

When trying to access a property only available to students, userData?.currentTeam , VS Code throws the following error:

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

I need help finding out why it is defaulting to the parent interface and how to allow the option of both.

Answer 1

This is standard behavior of unions: unless you do something to check what type you're dealing with, typescript will only allow you to access properties that exist on all members of the union.

Here are some examples of how you can narrow down the type:

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

Or:

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

Or, change the types so the objects have a property saying what type they are, which lets you do a "discriminated union"

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