TypeScript Academy · Lekcja

Strażnicy typów

Bezpiecznie pracuj z typami unknown i any za pomocą strażników typów

Strażnicy typów to bezpłatna lekcja TypeScript 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Wprowadzenie do strażników typów

Strażniki typów

Witamy w kolejnej lekcji! W tej lekcji dowiedzą się Państwo, czym są strażniki typów — zaawansowaną funkcją TypeScriptu, która pozwala zawężać typy w czasie wykonywania programu. Strażniki typów zapewniają bezpieczeństwo typów i pomagają unikać błędów. Przejdźmy do dzieła!

Czym są strażniki typów?

Strażnik typów to funkcja lub konstrukcja, która określa typ zmiennej w czasie wykonywania programu. Pozwala ona TypeScriptowi zawęzić typ zmiennej w określonym bloku kodu.

Przykład:

Zadanie: Proszę napisać funkcję, która używa strażnika typów do sprawdzenia, czy wartość jest liczbą.

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function printLength(value: unknown): void {
  if (isString(value)) {
    console.log(value.length); 
// TypeScript knows 'value' is a string here
  } else {
    console.log("Value is not a string");
  }
}

printLength("Hello"); 
// Output: 5
printLength(42); 
// Output: Value is not a string

Używanie typeof dla typów prostych

Używanie `typeof` dla typów prostych

Operatora typeof można użyć do sprawdzania typu wartości prostych, takich jak napisy, liczby i wartości logiczne.

Przykład:

Zadanie: Proszę użyć typeof, aby rozróżnić napis i liczbę w funkcji.

function printValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printValue("Hello"); 
// Output: String value: Hello
printValue(42); 
// Output: Number value: 42

Używanie instanceof dla klas

Używanie `instanceof` dla klas

Operator instanceof sprawdza, czy obiekt jest instancją określonej klasy. Przykład:

Zadanie: Proszę użyć instanceof, aby obsłużyć różne instancje klas w funkcji.

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

let dog = new Dog();
let cat = new Cat();
makeSound(dog); 
// Output: Woof!
makeSound(cat); 
// Output: Meow!

Używanie własnych strażników typów

Można tworzyć własne funkcje będące strażnikami typów, używając typu zwracanego value is Type. Przykład:

interface Car {
  make: string;
  model: string;
}

interface Bike {
  brand: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).make !== undefined;
}

function printVehicle(vehicle: Car | Bike): void {
  if (isCar(vehicle)) {
    console.log(`Car: ${vehicle.make} ${vehicle.model}`);
  } else {
    console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
  }
}

let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };

printVehicle(car); 
// Output: Car: Toyota Corolla
printVehicle(bike);
 // Output: Bike: Yamaha Sport

Unie dyskryminowane

Unie dyskryminowane używają wspólnej właściwości do rozróżniania typów. Przykład:

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };

console.log(calculateArea(circle)); 
// Output: 78.53981633974483
console.log(calculateArea(rectangle)); 
// Output: 200

Sprawdzanie kompletności przypadków

Sprawdzanie kompletności przypadków gwarantuje obsłużenie wszystkich możliwych przypadków w unii dyskryminowanej. Przykład:

function getShapeInfo(shape: Shape): string {
  switch (shape.kind) {
    case "circle":
      return `Circle with radius ${shape.radius}`;
    case "rectangle":
      return `Rectangle with dimensions ${shape.width}x${shape.height}`;
    default:
      // This line ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Typowe błędy

Oto kilka typowych błędów popełnianych podczas używania strażników typów:

Pomijanie niektórych przypadków typu unii.
Nieużywanie strażnika typów we wszystkich gałęziach logiki warunkowej.
Nieprawidłowe używanie as do rzutowania typów bez odpowiedniego sprawdzenia.

Wskazówka: Zawsze należy używać strażników typów do zawężania typów przed uzyskaniem dostępu do ich określonych właściwości lub metod!

Świetna robota!

Gratulacje! Dowiedzieli się już Państwo, jak używać strażników typów w TypeScripcie do zawężania typów w czasie wykonywania programu i zapewniania bezpieczeństwa typów. Strażniki typów są niezbędne podczas obsługi złożonych typów unii oraz tworzenia niezawodnego kodu bez błędów. W następnej lekcji zajmiemy się zaawansowanymi typami mapowanymi. Kontynuujmy kodowanie!

Często zadawane pytania

Czy lekcja „Strażnicy typów” jest bezpłatna?

Tak — pełny tekst „Strażnicy typów” 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 TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Strażnicy typów”?

Bezpiecznie pracuj z typami unknown i any za pomocą strażników typów Ćwiczysz TypeScript 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ąć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript 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 „Strażnicy typów”?

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 TypeScript Academy?

Tak. Każda lekcja TypeScript 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

← Powrót do TypeScript Academy