我已经在我的项目中使用 typescript 一个月了,我正在努力解决一些疑问。
是否有模式/推荐的方式来组织项目架构中的类型?
假设我们有一个包含以下接口(interface)的上下文:
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
prop 的类型为 ToastMessageData
:interface ToastMessageProps {
message: ToastMessageData;
style: React.CSSProperties;
}
const ToastMessage: React.FC<ToastMessageProps> = ({ message, style }) => {
我觉得从组件内部的上下文中导入接口(interface)很奇怪,所以发生了一些错误。
大家有什么推荐的?
最佳答案
通常,如果类型别名/接口(interface)仅针对组件,则可以将其写在同一个 .tsx
中。文件,因为您可以将它们视为“本地”用于该组件。
但是,在某些情况下,您可能需要在其他组件或其他帮助文件中重用该类型别名/接口(interface)(例如,组件 A 的接口(interface)扩展了组件 B 的接口(interface))。为此,最好将类型别名/接口(interface)存储在单独的文件中。例如,您可以直接拥有一个共享,其中包含要导出的所有常见类型别名/接口(interface)。
- pages
- ComponentA
- ComponentB
- shared
- interfaces
- messages.interface.ts
- geo.interface.ts
// etc
- services
- helper
// etc
这样做的主要好处是,您将能够防止 cyclic dependencies 的风险。 ,尤其是当您发现您正在编写多个组件相互导出和导入内容的代码时。
关于reactjs - 如何在带有 Typescript 的 React 项目中组织类型定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62373473/