Как работать с типами в React и Express App?

Question

У меня React-клиент в том же проекте, что и мой Node- Express бэкэнд. Прямо сейчас мое приложение React работает с TypeScript, и я тоже хочу изменить свой бэкэнд на TypeScript.

В настоящее время у меня есть папка client, содержащая мое приложение React и файлы моего сервера, которые просто лежат в моем каталоге root.

Теперь, поскольку я буду использовать TS на своем сервере, я спрашиваю себя, как вы обрабатываете типы в каждом проекте. Прямо сейчас, например, я объявляю interface для реквизита компонента следующим образом: App.tsx

export interface Room {
  gameId: string,
  started: boolean,
  players: string[]
}

function App() {
  const [room, setRoom] = useState<Room>();

  return (
    <div className="App">
      <Lobby room={room} />}
    </div>
  );
}

export default App;

В Lobby.tsx.

import {Room} from "../App";

export interface LobbyProps {
  room: Room;
}

function Lobby(props: LobbyProps) {

  return (
    <React.Fragment>
      <a href={'http://localhost:3000/' + props.room.gameId}>{'http://localhost:3000/' + props.room.started + " " + props.room.players}</a>
    </React.Fragment>
);
}

export default Lobby;

Уже в моем приложении реакции im повторное использование интерфейсов, и мой первый вопрос: можно ли поместить их в отдельный файл, чтобы я мог использовать их из разных мест?

Второй вопрос: что, если на моем бэкенде будут одинаковые интерфейсы или типы? Должен ли я держать их с обеих сторон или какова лучшая практика здесь?

Спасибо за любой совет!

Answer 1

Может быть проще сбросить все интерфейсы в отдельный файл interfaces.ts и импортировать их оттуда. С другой стороны, если у вас есть определенный c тип интерфейса, который будет использоваться только в одном модуле, он может остаться прямо в этом модуле.

Как только вам понадобятся некоторые интерфейсы на внешнем интерфейсе, вы Вы можете скопировать их из бэкэнда, но обычно на бэкэнде у вас могут быть отдельные интерфейсы для ApiObject и DBObject, так как вы можете не передавать данные из БД как есть. Таким образом, вы, вероятно, скопировали бы только часть интерфейсов в ваше интерфейсное приложение (обычно объектные интерфейсы Api).