Как проверить типы в Typescript

В Typescript мы должны проверять типы значений, такие как булевы, строковые, экземпляры объектов из классов, а также значения в объектах.

В Typescript у нас есть три способа работы с этим:

  • typeof: ключевое слово помогает проверить типы значений, такие как булево, строка, число и т.д.

  • instanceof: ключевое слово для сравнения экземпляра объекта с конструктором класса.

  • защитников типов: Мощный способ проверки типов с помощью языка функций typescript.

Сценарий

Мы создаем бухгалтерскую программу с классом сущности Invoice в коде приложения.

class Invoice {
  public amount: number;
  public description: string;
  country: string;
}

class SalesInvoices extends Invoice {
  products: Array<string> = [];
}

class PurchaseInvoice extends Invoice {
  tax: number;
}

const invoicesToProcess: Array<Invoice> = [];

Войти в полноэкранный режим Выход из полноэкранного режима

Одна команда хочет, чтобы мы поработали над некоторыми задачами.

  • Создайте функцию поддержки числа или строки для поля описания.

  • Создайте функцию для добавления только SalesInvoice в массив invoiceToProcess.

  • Итерация invoiceToProcess и печать всех счетов, если страна «ES» и сумма больше 100.

Идея заключается в том, чтобы использовать typeof, instanceof и type guards для каждой задачи. Давайте сделаем это:

Использование TypeOf

Оператор typeof помогает нам сравнивать типы значений javascript; поскольку параметр amount является строкой или числом, мы используем typeof с троицей в функции createInvoice.

function createInvoice(
  description: string | number,
  amount: number,
  country
): Invoice {
  const descriptionValue =
    typeof description === "number" ? `${description}` : description;
  return {
    description: descriptionValue,
    amount,
    country,
  };
}

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь у нас есть функция, строка поддержки и число в описании.

const invoiceWithNumber = createInvoice(1231321, 120, "ES");
const invoIceWithString = createInvoice("Banana", 90, "USA");
console.log(invoIceWithString, invoiceWithNumber);
Вход в полноэкранный режим Выход из полноэкранного режима

Отлично, переходим ко второму шагу.

Узнайте больше о typeof и типах значений.

Использование InstanceOf

Наша задача состоит только в том, чтобы добавить SalesInvoice в invoicesToProcess, потому что salesInvoice расширяется от Invoice. InvoiceToProcess понимает любой параметр счета-фактуры и расширяет форму Invoice из счета-фактуры.

Оператор instanceof приходит нам на помощь, потому что он сравнивает экземпляры классов.


function addInvoiceToProcess(invoice: Invoice) {
  if (invoice instanceof SalesInvoices) {
    invoicesToProcess.push(invoice);
  }
}

Вход в полноэкранный режим Выход из полноэкранного режима

Оператор instanceof сравнивает конструктор с SalesInvoice, если он совпадает, мы помещаем счет-фактуру в массив. Давайте протестируем наш код.

const salesInvoice = new SalesInvoices();
salesInvoice.amount = 100;
salesInvoice.country = "ES";

const basicInvoice = new Invoice();
basicInvoice.amount = 90;
basicInvoice.country = "USA";

addInvoiceToProcess(basicInvoice);
addInvoiceToProcess(salesInvoice);

console.log(invoicesToProcess);
Вход в полноэкранный режим Выйдите из полноэкранного режима

Работает отлично, переходим к последней задаче.

Узнайте больше об instanceof

Использование защитников типов

Для последних двух подходов мы используем typeof и instanceof, которые помогают нам с типами значений или экземплярами, но как насчет значений?

Последняя задача — вывести, если страна «ES», а сумма больше «100», и мы используем для этого защитные функции типов.

Защитники типов — это функция с оператором is, использующая утверждение, чтобы сообщить компилятору, что он соответствует некоторому типу.

function isValidInvoice(invoice: Invoice): invoice is SalesInvoices {
  return invoice.amount > 100 && invoice.country === "ES";
}

// the code looks clean.
invoicesToProcess.forEach((invoice) => {
  if (isValidInvoice(invoice)) {
    console.log(invoice);
  }
});

Вход в полноэкранный режим Выход из полноэкранного режима

Подробнее об охране типов

Подведение итогов

Мы узнали, как работать с проверкой типов в Typescript и использовали защитники типов для написания функций утверждения, чтобы сделать код чистым и легким для понимания.

Надеюсь, это поможет вам в будущем при проверке типов.

Полный исходный код

Оцените статью
devanswers.ru
Добавить комментарий