Как правильно написать тип Props для компонента Button?

Чтобы правильно написать тип Props для компонента Button в TypeScript, вы должны определить интерфейс или тип, который описывает все возможные свойства (props), которые этот компонент может принимать.

Вот пример, как это может выглядеть:

interface ButtonProps {
  text: string;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

Здесь мы определяем интерфейс ButtonProps, который описывает следующие свойства:
- text - строка, которая будет отображаться внутри кнопки (обязательное свойство с типом string)
- onClick - функция обратного вызова, которая будет вызываться при нажатии на кнопку (необязательное свойство с типом () => void)
- disabled - логическое значение, указывающее, должна ли быть кнопка отключена или нет (необязательное свойство с типом boolean)
- className - строка, содержащая классы CSS для кнопки (необязательное свойство с типом string)

Знак ? после имени свойства указывает, что это свойство не является обязательным и может быть опущено при передаче значений в компонент.

Пример использования этого типа на компоненте Button:

import React from 'react';

const Button: React.FunctionComponent<ButtonProps> = (props) => {
  return (
    <button
      onClick={props.onClick}
      disabled={props.disabled}
      className={props.className}
    >
      {props.text}
    </button>
  );
};

export default Button;

Здесь мы импортируем React и определяем компонент Button, который принимает ButtonProps в качестве обобщенного типа.

Внутри компонента Button мы можем использовать свойства из объекта props, чтобы установить значения атрибутов кнопки и отображать текст кнопки.

Теперь, когда мы имеем правильно определенные типы для Props компонента Button, Typescript будет предупреждать нас о возможных ошибках при использовании этого компонента, таких как передача неверного типа свойства или пропуск обязательного свойства. Это способствует более безопасному и надежному разработке кода на TypeScript.