Как правильно использовать interface в TS + React?

В TypeScript интерфейсы используются для определения формы и структуры объектов, что позволяет создавать более строгие типы данных. В контексте React интерфейсы часто используются для определения типов пропсов (props) компонентов.

Для использования интерфейсов с React следует выполнить следующие шаги:

1. Импортировать библиотеку React и необходимые типы данных из TypeScript:

import React from 'react';

2. Создать интерфейс, определяющий необходимые свойства (props) компонента. Ниже приведен пример интерфейса для компонента "UserCard", имеющего свойства "name" (имя пользователя) и "email" (электронная почта пользователя):

interface IUserCardProps {
  name: string;
  email: string;
}

3. Создать функциональный или классовый React-компонент и указать тип его пропсов, используя созданный интерфейс:

a) Функциональный компонент:

const UserCard: React.FC<IUserCardProps> = ({ name, email }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
};

b) Классовый компонент:

class UserCard extends React.Component<IUserCardProps> {
  render() {
    const { name, email } = this.props;
    return (
      <div>
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    );
  }
}

4. Использовать созданный компонент соответствующим образом внутри других компонентов:

const App: React.FC = () => {
  return <UserCard name="John Doe" email="[email protected]" />;
};

После определения интерфейса и типизации пропсов компонента, TypeScript будет проверять правильность переданных свойств и предоставлять автодополнение и подсказки во время разработки.

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