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

1. Создание функционального компонента:
   Чтобы создать функциональный компонент в React с помощью TypeScript, вы можете использовать следующий синтаксис:

import React from 'react';
type Props = {
  name: string;
};
const MyComponent: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};
export default MyComponent;

В этом примере мы определяем функциональный компонент с именем MyComponent, который получает свойство nameтипа string. Компонент просто отображает цифру divс приветственным сообщением.

1. Использование хуков React:
   Хуки React позволяют нам использовать состояние и другие функции React в функциональных компонентах. Вот пример использования хука useState:

import React, { useState } from 'react';
const Counter: React.FC = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};
export default Counter;

В этом примере мы используем хук useStateдля управления переменной состояния count. Нажатие кнопки «Увеличить» обновит счетчик.

1. Обработка реквизитов компонентов.
   Функциональные компоненты могут принимать реквизиты так же, как и компоненты классов. Вот пример:

import React from 'react';
type Props = {
  name: string;
  age: number;
};
const Person: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};
export default Person;

В этом примере мы определяем функциональный компонент с именем Person, который принимает nameи ageв качестве свойств.

1. Использование пользовательских хуков.
   Пользовательские хуки позволяют нам повторно использовать логику с отслеживанием состояния в нескольких компонентах. Вот пример:

import React, { useState, useEffect } from 'react';
const useFetchData = (url: string) => {
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const jsonData = await response.json();
      setData(jsonData);
    };
    fetchData();
  }, [url]);
  return data;
};
export default useFetchData;

В этом примере мы создаем специальный хук под названием useFetchData, который извлекает данные из заданного URL-адреса и возвращает их. Данные извлекаются с помощью API fetchи сохраняются в состоянии компонента с помощью перехватчика useState.

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