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

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

type MyComponentProps = {
  name: string;
  age: number;
};
const MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
};

Метод 2: компоненты класса с реквизитами
Компоненты класса используют ключевое слово propsдля доступа к свойствам. Вот пример:

type MyComponentProps = {
  name: string;
  age: number;
};
class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <p>{this.props.age}</p>
      </div>
    );
  }
}

Метод 3. Реквизиты по умолчанию
Реквизиты по умолчанию позволяют определить резервные значения для реквизитов, которые не указаны. Вот пример:

type MyComponentProps = {
  name: string;
  age?: number;
};
const MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age || "Unknown"}</p>
    </div>
  );
};
MyComponent.defaultProps = {
  age: 25,
};

Метод 4: Деструктуризация реквизита
Деструктуризация реквизита позволяет извлечь определенные свойства из объекта props. Вот пример:

type MyComponentProps = {
  name: string;
  age: number;
};
const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
};

Метод 5: передача функций обратного вызова в качестве реквизита
Вы можете передавать функции обратного вызова в качестве реквизита дочерним компонентам. Вот пример:

type ButtonProps = {
  onClick: () => void;
};
const Button: React.FC<ButtonProps> = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};
type MyComponentProps = {
  name: string;
};
const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  const handleClick = () => {
    console.log(`Hello, ${name}!`);
  };
  return (
    <div>
      <h1>{name}</h1>
      <Button onClick={handleClick} />
    </div>
  );
};

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