Как правильно использовать interface для to (Router) Typescript?

Для правильного использования интерфейсов в React и TypeScript, когда речь идет о маршрутизации (Routing), мы можем использовать интерфейс для определения типа свойств (props) нашего компонента, который рендерит маршрут.

Во-первых, для использования интерфейсов в TypeScript, нам нужно создать новый файл с расширением .tsx, чтобы разрешить использование JSX внутри компонентов.

Далее, создаем интерфейс, который описывает тип свойств (props) компонента. В нашем случае, мы создадим интерфейс для компонента, оборачивающего Route из библиотеки react-router-dom.

interface MyRouteProps {
  path: string;
  exact?: boolean;
  component: React.ComponentType<any>;
}

Здесь мы определяем три свойства:
- path - путь маршрута;
- exact - флаг, указывающий на точное совпадение пути (необязательный параметр);
- component - компонент, который должен быть отрендерен при совпадении маршрута.

После создания интерфейса мы можем использовать его внутри компонента-обертки Route. Например, так:

import React from 'react';
import { Route } from 'react-router-dom';

const MyRoute: React.FC<MyRouteProps> = (props) => {
  const { component: Component, ...rest } = props;

  return <Route {...rest} render={(props) => <Component {...props} />} />;
};

В этом примере мы деструктурируем component из свойств (props), чтобы получить доступ к компоненту, который должен быть отрендерен, а остальные свойства (path и exact) передаем в Route с помощью оператора spread (...rest). Возвращаемый JSX код отрендерит Route с правильными свойствами.

Теперь, чтобы использовать наш компонент-обертку MyRoute, мы можем определить маршруты в файле, где у нас описано приложение или в каком-нибудь отдельном файле с маршрутами:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

import MyRoute from './MyRoute';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App: React.FC = () => {
  return (
    <Router>
      <MyRoute exact path="/" component={Home} />
      <MyRoute path="/about" component={About} />
      <MyRoute component={NotFound} />
    </Router>
  );
};

В этом примере мы используем MyRoute вместо Route, чтобы определить основные маршруты нашего приложения.

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