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

1. Основные реквизиты.
   В функциональных компонентах React реквизиты — это механизм передачи данных из родительского компонента в дочерний компонент. Вот пример функционального компонента с реквизитами TypeScript:

import React from 'react';
interface MyComponentProps {
  name: string;
  age: number;
}
const MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age} years old</p>
    </div>
  );
};

1. Необязательный реквизит.
   Иногда определенный реквизит может быть необязательным. TypeScript позволяет определять дополнительные реквизиты с помощью символа ?. Вот пример:

interface MyComponentProps {
  name: string;
  age?: number;
}
const MyComponent: React.FC<MyComponentProps> = (props) => {
  // ...
};

1. Реквизиты по умолчанию.
   Вы также можете указать значения по умолчанию для реквизитов, используя свойство defaultProps. Вот пример:

interface MyComponentProps {
  name: string;
  age: number;
}
const MyComponent: React.FC<MyComponentProps> = (props) => {
  // ...
};
MyComponent.defaultProps = {
  age: 18,
};

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

interface ButtonProps {
  onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

1. Реквизиты с дочерними элементами:
   Функциональные компоненты также могут получать дочерние элементы в качестве реквизитов. TypeScript предоставляет тип ReactNodeдля решения этой проблемы:

interface CardProps {
  children: React.ReactNode;
}
const Card: React.FC<CardProps> = ({ children }) => {
  return <div className="card">{children}</div>;
};

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

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