Zawężanie typów — TypeScript

Sprawdzenia warunkowe pomagają TypeScriptowi ustalić faktyczny typ wartości.

Jak to działa?

Operator typeof może zawęzić unię typu. Dzięki temu kompilator wie, jakie operacje są bezpieczne w danym bloku.

Przykład 1 — poznaj zapis

function lengthOf(value: string | string[]): number {
  if (typeof value === "string") {
    return value.length;
  }
  return value.length;
}

console.log(lengthOf("abc"));

Obie gałęzie mają dostęp do .length, ale typ wartości jest inny.

Przeczytaj kod linijka po linijce

function lengthOf(value: string | string[]): number {Definiujemy funkcję lub metodę, której można użyć później.
if (typeof value === "string") {Sprawdzamy warunek lub wybieramy jedną z możliwości.
return value.length;Zwracamy wyliczoną wartość do miejsca wywołania funkcji.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

const value: unknown = "abc";
if (typeof value === "string") console.log(value.toUpperCase());

Wynik drugiego przykładupo uruchomieniu przykładu

ABC

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Przyjmij number | string i zwróć napis w obu przypadkach.