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

我已经在我的项目中使用typescript一个月了，我一直在努力解决一些疑问

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

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

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;
}

我觉得从组件内部的上下文导入接口很奇怪，所以出现了一些问题

---

你们推荐什么 .tx文件中写入它是正确的，因为您可以认为它们是“本地的”用于该组件。 但是，在某些情况下，您可能需要跨其他组件或其他帮助文件重用该类型的别名/接口（例如，组件A的接口扩展了组件B的接口）。为此，最好将类型别名/接口存储在单独的文件中。例如，您可以直接拥有一个共享的，其中包含所有要导出的公共类型别名/接口

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

---

这样做的主要好处是，您将能够防止发生错误的风险，特别是当您发现您正在编写代码，其中多个组件正在相互导出和导入内容时。

谢谢！！我喜欢创建一个共享文件夹来存储多个文件中使用的类型的想法，正如您所说，这样可以避免循环依赖关系，这是我不久前遇到的一个问题。

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