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

1. Пример: базовая функция с объявлениями типов
   Давайте начнем с простой функции, которая складывает два числа. Вот как можно объявить функцию со встроенными типами:

const addNumbers = (a: number, b: number): number => {
  return a + b;
};

1. Пример: функция с необязательными параметрами
   Иногда вам может потребоваться сделать параметры функции необязательными. Вот пример функции, которая объединяет две строки, одна из которых необязательна:

const concatenateStrings = (str1: string, str2?: string): string => {
  if (str2) {
    return str1 + str2;
  }
  return str1;
};

1. Пример: функция со значениями параметров по умолчанию
   Вы также можете установить значения по умолчанию для параметров функции. Вот пример функции, которая умножает число на коэффициент с коэффициентом по умолчанию 2:

const multiplyByFactor = (num: number, factor: number = 2): number => {
  return num * factor;
};

1. Пример: функция с остальными параметрами
   Остальные параметры позволяют передавать в функцию произвольное количество аргументов. Вот пример суммирования переменного количества чисел:

const sumNumbers = (...numbers: number[]): number => {
  return numbers.reduce((sum, num) => sum + num, 0);
};

1. Пример: функция с типами объединения
   Типы объединения позволяют указать, что параметр может иметь несколько типов. Вот пример функции, которая принимает строку или массив строк:

const processInput = (input: string | string[]): void => {
  if (Array.isArray(input)) {
    input.forEach(item => console.log(item));
  } else {
    console.log(input);
  }
};

1. Пример: функция с защитой типа
   Защита типа помогает сузить тип параметра внутри функции. Вот пример, который проверяет, является ли параметр объектом, и выполняет соответствующее действие:

const processObject = (obj: unknown): void => {
  if (typeof obj === 'object' && obj !== null) {
    console.log('Processing object:', obj);
  } else {
    console.log('Invalid input!');
  }
};

1. Пример: функция с обратными вызовами
   Функции также могут принимать обратные вызовы в качестве параметров. Вот пример функции, которая вызывает функцию обратного вызова со строковым параметром:

const processInputWithCallback = (input: string, callback: (result: string) => void): void => {
  const processedResult = input.toUpperCase();
  callback(processedResult);
};

1. Пример: функция с универсальными шаблонами
   Обобщенные функции позволяют писать многократно используемые функции, которые могут работать с разными типами. Вот пример функции, которая меняет местами два элемента массива с помощью дженериков:

const swapElements = <T>(arr: T[], index1: number, index2: number): T[] => {
  [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
  return arr;
};

1. Пример: асинхронная функция с обещаниями
   Асинхронные функции позволяют писать асинхронный код с использованием обещаний. Вот пример асинхронной функции, которая извлекает данные из API:

const fetchData = async (): Promise<string> => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

1. Пример: перегрузка функции
   Перегрузка функции позволяет определить несколько сигнатур функций для одного и того же имени функции. Вот пример функции, которая вычисляет площадь различных фигур на основе количества аргументов:

function calculateArea(shape: 'circle', radius: number): number;
function calculateArea(shape: 'rectangle', length: number, width: number): number;
function calculateArea(shape: string, ...args: number[]): number {
  if (shape === 'circle') {
    const [radius] = args;
    return Math.PI * radius * radius;
  } else if (shape === 'rectangle') {
    const [length, width] = args;
    return length * width;
  }
  return 0;
}

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

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

Имея в своем наборе инструментов эти примеры функций TypeScript, вы будете хорошо подготовлены к написанию надежного и типобезопасного кода в своих приложениях React. Приятного кодирования!