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

1. Базовый функциональный компонент.
   Самый простой способ определить функциональный компонент в TypeScript — использовать синтаксис функции. Вот пример:

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

В этом примере мы определяем функциональный компонент с именем MyComponent, который принимает свойство nameтипа string. Мы используем тип React.FC, чтобы указать, что это функциональный компонент.

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

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

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

В этом примере мы определяем типы свойств для MyComponent, используя свойство propTypes.

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

import React from 'react';
type Props = {
  name: string;
  age?: number;
};
const MyComponent: React.FC<Props> = ({ name, age = 18 }) => {
  return <div>Hello, {name}! You are {age} years old.</div>;
};

В этом примере свойство ageявляется необязательным и имеет значение по умолчанию 18, если оно не указано.

1. Пересылка ссылок:
   Если вам нужно переслать ссылку на дочерний компонент, вы можете использовать тип React.ForwardRefRenderFunction. Вот пример:

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

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

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