Уточните свой код TypeScript с помощью сужения

TypeScript — это мощный язык программирования со статической типизацией, который помогает разработчикам писать более удобный и масштабируемый код JavaScript. Одной из его самых мощных функций является возможность сужения типов на основе условий, что может помочь разработчикам писать более надежный и безошибочный код. В этой статье мы рассмотрим несколько вариантов использования, когда сужение важно в TypeScript.

Вариант использования 1: сужение с помощью API

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

Например, предположим, что у нас есть API, который возвращает данные о продуктах. Первоначально TypeScript может не знать точный тип возвращаемых данных. Используя сужение, мы можем уточнить тип данных на основе фактических данных, возвращаемых API.

interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
}

async function fetchProducts(): Promise<Product[] | null> {
  // Fetch products from API
}

const products = await fetchProducts(); // fetch products from API

if (Array.isArray(products)) {
  const product: Product = products[0]; // refine the type of products
  console.log(product.name); // TypeScript knows that product has a name property
}

В приведенном выше примере мы определяем интерфейс для продукта и функцию, которая извлекает продукты из API. Изначально функция fetchProducts может возвращать null или массив продуктов, а TypeScript может не знать точный тип возвращаемых данных. Используя сужение, мы уточняем тип возвращаемых данных до массива продуктов, что позволяет нам без ошибок обращаться к свойствам продукта.

Вариант использования 2: сужение с помощью компонентов React

В React компоненты могут получать пропсы разных типов, а TypeScript может не знать точный тип пропсов. Сужение можно использовать для уточнения типа реквизита на основе его фактического типа.

Например, предположим, что у нас есть компонент React, который получает свойство типа string или null. Первоначально TypeScript может не знать точный тип реквизита. Используя сужение, мы можем уточнить тип реквизита на основе его фактического типа.

interface Props {
  name: string | null;
}

const MyComponent: React.FC<Props> = ({ name }) => {
  if (name !== null) {
    console.log(name.toUpperCase()); // refine the type of name
  }
  return <div>{name}</div>;
};

В приведенном выше примере мы определяем интерфейс для реквизита компонента и компонента, который получает реквизит имени типа string или null. Изначально TypeScript может не знать точный тип имени. Используя сужение, мы уточняем тип свойства name до строки, что позволяет нам обращаться к методу toUpperCase без каких-либо ошибок.

Вариант использования 3: сужение с помощью условных операторов

В TypeScript условные операторы могут использоваться для сужения типов на основе условий. Это может помочь разработчикам писать более надежный и безошибочный код.

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

function printStringLength(str: string | null) {
  if (str !== null) {
    console.log(str.length); // refine the type of str
  }
}

В приведенном выше примере мы определяем функцию, которая получает строку или null, и используем условный оператор, чтобы проверить, не является ли строка нулевой, прежде чем получить доступ к ее свойству длины. Используя сужение, мы уточняем тип строки до непустой строки, что позволяет нам получить доступ к ее свойству длины без каких-либо ошибок.

Вариант использования 4: сужение с помощью Union Types

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

Например, предположим, что у нас есть функция, которая получает аргумент типа число или строка, и мы хотим проверить, является ли аргумент числом, прежде чем выполнять какие-либо вычисления.

function calculateSum(arg: number | string) {
  if (typeof arg === 'number') {
    console.log(arg + 10); // refine the type of arg
  }
}

В приведенном выше примере мы определяем функцию, которая получает аргумент типа number или string, и используем typeof для проверки, является ли аргумент числом перед выполнением некоторых вычислений. С помощью сужения мы уточняем тип аргумента до числа, что позволяет выполнять сложение без ошибок.

Вариант использования 5: сужение с помощью Type Guards

В TypeScript охранники типов — это функции, которые возвращают логическое значение, и их можно использовать для сужения типов на основе условий. Ограничители типов можно использовать для определения более сложных условий сужения.

Например, предположим, что у нас есть объект, который может иметь свойства firstName и lastName или просто свойство name. Мы можем использовать защиту типа, чтобы сузить тип объекта в зависимости от того, есть ли у него свойства firstName и lastName.

interface Person {
  name: string;
  firstName?: string;
  lastName?: string;
}

function isFullName(person: Person): person is { firstName: string, lastName: string } {
  return typeof person.firstName === 'string' && typeof person.lastName === 'string';
}

function greet(person: Person) {
  if (isFullName(person)) {
    console.log(`Hello ${person.firstName} ${person.lastName}`);
  } else {
    console.log(`Hello ${person.name}`);
  }
}

В приведенном выше примере мы определяем интерфейс для объекта person и функцию защиты типа isFullName, которая возвращает логическое значение в зависимости от того, имеет ли объект свойства firstName и lastName. Используя сужение с помощью защиты типов, мы уточняем тип объекта person на основе его фактических свойств, что позволяет нам получить доступ к свойствам без каких-либо ошибок.

Просмотреть все мои подсказки о производительности здесь:

https://promptbase.com/profile/briandolcevida

Заключение

В заключение, сужение — важная функция TypeScript, которая может помочь разработчикам писать более надежный и безошибочный код. Это позволяет разработчикам уточнять типы переменных и выражений на основе условий, которые могут обнаруживать ошибки во время компиляции, повышать производительность и делать код более читабельным.

В этой статье мы рассмотрели несколько вариантов использования, в которых сужение важно в TypeScript, включая сужение с помощью API, компонентов React, условных операторов, типов объединения и защиты типов. Используя сужение в этих сценариях, разработчики могут сделать свой код более надежным, эффективным и удобным в сопровождении.

💡 Наконец, стоит отметить, что совместное использование и повторное использование компонентов кода в проектах может значительно повысить производительность и качество кода. Bit – это платформа для размещения и обмена повторно используемыми компонентами, которая обеспечивает полную интеграцию с TypeScript. С Bit вы можете легко создавать, находить и использовать общие компоненты в нескольких проектах, а также использовать мощь TypeScript для обеспечения безопасности типов и удобства обслуживания. Подробнее здесь и здесь.

Если вам понравилось то, что вы прочитали, вы можете помочь мне и купить мне чашку кофе?

Создавайте приложения с повторно используемыми компонентами, как Lego

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

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

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите: