Jak zadeklarować zmienną typu A lub B, gdy jedna rozszerza drugą w Typescript

0

Pytanie

Mam dostawca kontekstu, który przekazuje dane użytkownika w całej aplikacji.

Mam studencki interfejs:

export interface Student extends User

Chciałbym, aby dostawca oddawał własne dane typu Student lub User w następujący sposób:

let userData: Student | User = null;

Podczas próby uzyskania dostępu do właściwości, dostępnego tylko studentom, userData?.currentTeam, VS Kod wyświetla następujący błąd:

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

Potrzebuję pomocy, aby dowiedzieć się, dlaczego domyślnie jest to macierzysty interfejs i jak rozwiązać oba warianty.

1

Najlepsza odpowiedź

1

To jest standardowe zachowanie związków: jeśli nie zrobisz czegoś, aby sprawdzić, z jakim typem mamy do czynienia, typescript pozwoli ci uzyskać dostęp tylko do właściwości, istniejącym u wszystkich członków związku.

Oto kilka przykładów tego, jak można zawęzić typ. Możesz sprawdzić, czy jest to właściwość:

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

Lub, jeśli utworzono klasy (których może nie być), można użyć egzemplarz:

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

Czy można zmienić typy, aby u wszystkich z nich była ogólna właściwość, którą można następnie sprawdzić, z jakim typem mamy do czynienia. To jest czasami nazywane "dyskryminujące europejską".

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);
}
2021-11-24 00:11:30

Dziękuję. Udało mi się to wykorzystać, aby ustawić domyślną wartość w polu formularza za pomocą trójskładnikowych: 'currentTeam' in userData ? userData.currentTeam.teamName: 'No Team Set'
Rafael Zasas

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................