0Pricing
Frontend Academy · Lekcja

Zawężanie: typeof, instanceof, unie dyskryminowane

Proszę używać strażników typów do zawężania typów unii w czasie wykonywania za pomocą typeof, instanceof i wzorców unii dyskryminowanych.

Zawężanie: typeof, instanceof, unie dyskryminowane to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest zawężanie typu

TypeScript rozpoczyna od szerokiego typu, na przykład string | number. Zawężanie to proces doprecyzowywania typu do bardziej szczegółowego typu wewnątrz bloku warunkowego. TypeScript automatycznie śledzi zawężanie.

Zawężanie za pomocą typeof

Operator typeof zawęża typy prymitywne. Wewnątrz bloku if TypeScript zna dokładny typ.

function format(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string here
  }
  if (typeof value === 'number') {
    return value.toFixed(2);   // number here
  }
  return String(value);        // boolean here
}

Zawężanie za pomocą instanceof

instanceof zawęża typ instancji klas. Wewnątrz bloku TypeScript zna konkretną klasę.

function processError(err: unknown) {
  if (err instanceof Error) {
    console.error(err.message); // Error methods available
  } else if (err instanceof Response) {
    console.error('HTTP error:', err.status);
  } else {
    console.error('Unknown:', err);
  }
}

Zawężanie na podstawie truthiness

TypeScript eliminuje null i undefined podczas sprawdzania wartości truthy.

function printLength(value: string | null | undefined) {
  if (value) {
    console.log(value.length); // string here (null/undefined filtered)
  }
}

Zawężanie na podstawie równości

Ścisłe porównanie równości zawęża typ do typu literałowego. Jest przydatne w przypadku unii rozróżnianych i enumów stringowych.

function handle(action: 'submit' | 'cancel' | 'reset') {
  if (action === 'submit') {
    // action is exactly 'submit'
    doSubmit();
  }
}

Zawężanie za pomocą operatora in

Operator in zawęża unie typów obiektów, sprawdzając, które właściwości istnieją.

interface Cat { meow(): void; }
interface Dog { bark(): void; }

function speak(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow(); // Cat
  } else {
    animal.bark(); // Dog
  }
}

Unie rozróżniane — zawężanie na podstawie tagu

Unia rozróżniana ma wspólną właściwość o typie literałowym — dyskryminant. TypeScript zawęża unię w instrukcji switch lub if na podstawie tej właściwości.

type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState   = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;

function render(state: State) {
  switch (state.status) {
    case 'loading': return '<Spinner />';
    case 'success': return renderUsers(state.data);  // state.data available
    case 'error':   return renderError(state.message);
  }
}

Predykaty typów — własne strażniki typów

Funkcja predykatu typu zawęża typ w kodzie wywołującym. Jako typ zwracany należy użyć param is Type.

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'name' in value &&
    typeof (value as User).name === 'string'
  );
}

const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
  console.log(data.name); // typed as User
}

Funkcje asercji

Funkcja asercji zgłasza wyjątek, jeśli warunek nie jest spełniony, a po jej wywołaniu zawęża typ.

function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new Error('Expected string');
}

const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string here

Sprawdzanie kompletności przypadków

Gdy instrukcja switch dla unii rozróżnianej pozostawia typ never w gałęzi default, TypeScript gwarantuje obsługę wszystkich przypadków. Należy dodać default przypisujący wartość do never, aby otrzymać błąd kompilacji po dodaniu nowego wariantu.

function render(state: State): string {
  switch (state.status) {
    case 'loading': return '...';
    case 'success': return state.data.length.toString();
    case 'error':   return state.message;
    default:
      const _exhaustive: never = state;
      throw new Error('Unhandled state: ' + _exhaustive);
  }
}

Zawężanie za pomocą Array.isArray

Array.isArray() zawęża wartość do typu tablicowego.

function processInput(input: string | string[]) {
  if (Array.isArray(input)) {
    return input.join(', '); // string[]
  }
  return input.toUpperCase(); // string
}

Szybkie sprawdzenie

Która technika zawężania wykorzystuje wspólną właściwość literałową do rozróżniania wariantów typu unii?

Podsumowanie: zawężanie typów w TypeScript

typeof służy do typów prymitywnych. instanceof służy do klas. Operator in służy do kształtów obiektów. Sprawdzanie truthiness odfiltrowuje null i undefined. Unie rozróżniane ze wspólną właściwością literałową umożliwiają tworzenie kompletnych instrukcji switch. Własne predykaty typów (is) służą do złożonych sprawdzeń w czasie działania. Sprawdzanie kompletności przypadków wykorzystuje never w gałęziach default.

Często zadawane pytania

Czy lekcja „Zawężanie: typeof, instanceof, unie dyskryminowane” jest bezpłatna?

Tak — pełny tekst „Zawężanie: typeof, instanceof, unie dyskryminowane” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zawężanie: typeof, instanceof, unie dyskryminowane”?

Proszę używać strażników typów do zawężania typów unii w czasie wykonywania za pomocą typeof, instanceof i wzorców unii dyskryminowanych. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Zawężanie: typeof, instanceof, unie dyskryminowane”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Generics: T, extends i ograniczenia
  2. Typy narzędziowe: Partial, Required, Pick, Omit
  3. Typy mapowane i warunkowe
  4. Zawężanie: typeof, instanceof, unie dyskryminowane
← Powrót do Frontend Academy