如何在带有 Typescript 的 React 项目中组织类型定义

Question

我已经在我的项目中使用打字稿一个月了，但我一直在努力解决一些疑问。

是否有一种模式/推荐的方式来组织项目架构中的类型？

假设我们有一个具有以下接口的上下文：

export type ToastMessageType = 'info' | 'success' | 'error';

export interface ToastMessageData {
  id: string;
  title: string;
  description: string;
  type: ToastMessageType;
}

export interface ToastsStateContextData {
  messages: ToastMessageData[];
}

export interface ToastsDispatchContextData {
  addToast: (message: Omit<ToastMessageData, 'id'>) => void;
  removeToast: (id: string) => void;
}

还有另一个称为ToastMessage接收message道具的组件，其类型为ToastMessageData：

interface ToastMessageProps {
  message: ToastMessageData;
  style: React.CSSProperties;
}

const ToastMessage: React.FC<ToastMessageProps> = ({ message, style }) => {

我觉得从组件内部的上下文中导入接口很奇怪，所以发生了一些错误。

大家有什么推荐吗？

Answer 1

通常，如果类型别名/接口仅特定于组件，则可以将其写入同一.tsx文件中，因为您可以将它们视为“本地”用于该组件。

但是，在某些情况下，您需要在其他组件或其他帮助文件中重用该类型别名/接口（例如，组件 A 的接口扩展了组件 B 的接口）。为此，最好将类型别名/接口存储在单独的文件中。例如，您可以直接拥有一个共享，其中包含要导出的所有常见类型别名/接口。

- pages
  - ComponentA
  - ComponentB
- shared
  - interfaces
    - messages.interface.ts
    - geo.interface.ts
    // etc 
  - services
  - helper
  // etc

这样做的主要优点是，您将能够防止循环依赖的风险，尤其是当您发现您正在编写多个组件相互导出和导入内容的代码时。