M

MLOG

Українська

Вивчіть захисники та твердження типів у TypeScript для підвищення безпеки, запобігання помилкам та написання надійного коду. Практичні приклади та поради.

Опановуємо безпеку типів: вичерпний посібник із захисників типів та тверджень про типи

У світі розробки програмного забезпечення, особливо при роботі з динамічно типізованими мовами, як-от JavaScript, підтримка безпеки типів може бути значним викликом. TypeScript, надмножина JavaScript, вирішує цю проблему, вводячи статичну типізацію. Однак навіть із системою типів TypeScript виникають ситуації, коли компілятору потрібна допомога у визначенні правильного типу змінної. Саме тут у гру вступають захисники типів (type guards) та твердження про типи (type assertions). Цей вичерпний посібник детально розгляне ці потужні функції, надаючи практичні приклади та найкращі практики для підвищення надійності та легкості підтримки вашого коду.

Що таке захисники типів?

Захисники типів — це вирази TypeScript, які звужують тип змінної в межах певної області видимості. Вони дозволяють компілятору зрозуміти тип змінної точніше, ніж він припускав спочатку. Це особливо корисно при роботі з об'єднаними типами (union types) або коли тип змінної залежить від умов під час виконання. Використовуючи захисники типів, ви можете уникнути помилок під час виконання та писати більш надійний код.

Поширені техніки захисту типів

TypeScript надає кілька вбудованих механізмів для створення захисників типів:

Використання typeof

Оператор typeof — це простий спосіб перевірити примітивний тип змінної. Він повертає рядок, що вказує на тип.

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript знає, що 'value' тут є рядком
  } else {
    console.log(value.toFixed(2)); // TypeScript знає, що 'value' тут є числом
  }
}

printValue("hello"); // Вивід: HELLO
printValue(3.14159); // Вивід: 3.14

Використання instanceof

Оператор instanceof перевіряє, чи є об'єкт екземпляром певного класу. Це особливо корисно при роботі зі спадкуванням.

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark(); // TypeScript знає, що 'animal' тут є Dog
  } else {
    console.log("Generic animal sound");
  }
}

const myDog = new Dog("Buddy");
const myAnimal = new Animal("Generic Animal");

makeSound(myDog); // Вивід: Woof!
makeSound(myAnimal); // Вивід: Generic animal sound

Використання in

Оператор in перевіряє, чи має об'єкт певну властивість. Це корисно при роботі з об'єктами, які можуть мати різні властивості залежно від їхнього типу.

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

function move(animal: Bird | Fish) {
  if ("fly" in animal) {
    animal.fly(); // TypeScript знає, що 'animal' тут є Bird
  } else {
    animal.swim(); // TypeScript знає, що 'animal' тут є Fish
  }
}

const myBird: Bird = { fly: () => console.log("Flying"), layEggs: () => console.log("Laying eggs") };
const myFish: Fish = { swim: () => console.log("Swimming"), layEggs: () => console.log("Laying eggs") };

move(myBird); // Вивід: Flying
move(myFish); // Вивід: Swimming

Власні функції-захисники типів

Для більш складних сценаріїв ви можете визначити власні функції-захисники типів. Ці функції повертають предикат типу, який є логічним виразом, що TypeScript використовує для звуження типу змінної. Предикат типу має форму змінна is Тип.

interface Square {
  kind: "square";
  size: number;
}

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

type Shape = Square | Circle;

function isSquare(shape: Shape): shape is Square {
  return shape.kind === "square";
}

function getArea(shape: Shape) {
  if (isSquare(shape)) {
    return shape.size * shape.size; // TypeScript знає, що 'shape' тут є Square
  } else {
    return Math.PI * shape.radius * shape.radius; // TypeScript знає, що 'shape' тут є Circle
  }
}

const mySquare: Square = { kind: "square", size: 5 };
const myCircle: Circle = { kind: "circle", radius: 3 };

console.log(getArea(mySquare)); // Вивід: 25
console.log(getArea(myCircle)); // Вивід: 28.274333882308138

Що таке твердження про типи?

Твердження про типи — це спосіб повідомити компілятору TypeScript, що ви знаєте про тип змінної більше, ніж він наразі розуміє. Це спосіб обійти виведення типів TypeScript і явно вказати тип значення. Однак важливо використовувати твердження про типи з обережністю, оскільки вони можуть обійти перевірку типів TypeScript і потенційно призвести до помилок під час виконання, якщо їх використовувати неправильно.

Твердження про типи мають дві форми:

Ключове слово as зазвичай є кращим, оскільки воно більш сумісне з JSX.

Коли використовувати твердження про типи

Твердження про типи зазвичай використовуються в таких сценаріях:

Приклади тверджень про типи

Явне твердження про тип

У цьому прикладі ми стверджуємо, що виклик document.getElementById поверне HTMLCanvasElement. Без твердження TypeScript вивів би більш загальний тип HTMLElement | null.

const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d"); // TypeScript знає, що 'canvas' тут є HTMLCanvasElement

if (ctx) {
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
}

Робота з невідомими типами

При роботі з даними із зовнішнього джерела, наприклад API, ви можете отримати дані з невідомим типом. Ви можете використовувати твердження про тип, щоб повідомити TypeScript, як обробляти ці дані.

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const data = await response.json();
  return data as User; // Стверджуємо, що дані є User
}

fetchUser(1)
  .then(user => {
    console.log(user.name); // TypeScript знає, що 'user' тут є User
  })
  .catch(error => {
    console.error("Помилка отримання користувача:", error);
  });

Застереження при використанні тверджень про типи

Твердження про типи слід використовувати помірковано та з обережністю. Надмірне використання тверджень про типи може приховати глибинні помилки типів та призвести до проблем під час виконання. Ось кілька ключових аспектів:

Звуження типів

Захисники типів нерозривно пов'язані з концепцією звуження типів. Звуження типів — це процес уточнення типу змінної до більш конкретного типу на основі умов або перевірок під час виконання. Захисники типів — це інструменти, які ми використовуємо для досягнення звуження типів.

TypeScript використовує аналіз потоку керування, щоб зрозуміти, як тип змінної змінюється в різних гілках коду. Коли використовується захисник типу, TypeScript оновлює своє внутрішнє розуміння типу змінної, дозволяючи вам безпечно використовувати методи та властивості, специфічні для цього типу.

Приклад звуження типів

function processValue(value: string | number | null) {
  if (value === null) {
    console.log("Value is null");
  } else if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript знає, що 'value' тут є рядком
  } else {
    console.log(value.toFixed(2)); // TypeScript знає, що 'value' тут є числом
  }
}

processValue("test"); // Вивід: TEST
processValue(123.456); // Вивід: 123.46
processValue(null); // Вивід: Value is null

Найкращі практики

Щоб ефективно використовувати захисники типів та твердження про типи у ваших TypeScript проєктах, дотримуйтесь таких найкращих практик:

Міжнародні аспекти

При розробці застосунків для глобальної аудиторії, пам'ятайте, як захисники типів та твердження про типи можуть вплинути на локалізацію та інтернаціоналізацію (i18n). Зокрема, враховуйте:

Висновок

Захисники типів та твердження про типи є важливими інструментами для підвищення безпеки типів та написання більш надійного коду на TypeScript. Розуміючи, як ефективно використовувати ці функції, ви можете запобігати помилкам під час виконання, покращувати підтримку коду та створювати надійніші застосунки. Пам'ятайте, що слід віддавати перевагу захисникам типів над твердженнями про типи, коли це можливо, документувати ваші твердження про типи та перевіряти зовнішні дані для забезпечення точності інформації про типи. Застосування цих принципів дозволить вам створювати більш стабільне та передбачуване програмне забезпечення, придатне для розгортання в усьому світі.