Руслан Куянец | Reactify on Telegram: “👩‍💻 Type Guards в TypeScript Type Guards

👩‍💻 Type Guards в TypeScript

Type Guards - это выражения, проверяющие тип в runtime. Они позволяют сузить тип переменной в блоке кода.

📌 Оператор typeof:
typeof проверяет тип значения во время выполнения. Если val - строка, выполняется первый блок, где доступны строковые методы. Иначе val считается числом, и доступны числовые методы.


function processValue(val: string | number) {
  if (typeof val === "string") {
    console.log(val.toUpperCase()); // val имеет тип string
  } else {
    console.log(val.toFixed(2)); // val имеет тип number
  }
}

📌 Оператор instanceof:
instanceof проверяет, является ли объект экземпляром определённого класса. Если animal - экземпляр Dog, вызывается bark(). В противном случае считается, что это Cat, и вызывается meow().


class Dog {
  bark() {}
}

class Cat {
  meow() {}
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // animal имеет тип Dog
  } else {
    animal.meow(); // animal имеет тип Cat
  }
}

📌 Пользовательские Type Guards:
isFish - это пользовательская функция-проверка типа. Она проверяет наличие метода swim. Если метод есть, функция возвращает true, и TypeScript считает pet объектом типа Fish. Иначе pet считается Bird.


interface Fish { swim: () => void; }
interface Bird { fly: () => void; }

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim(); // pet имеет тип Fish
  } else {
    pet.fly(); // pet имеет тип Bird
  }
}

#frontend #react #typescript