如何在带有 Typescript 的 React 项目中组织类型定义
Posted
技术标签:
【中文标题】如何在带有 Typescript 的 React 项目中组织类型定义【英文标题】:How to organize types definitions in a React Project w/ Typescript 【发布时间】:2020-10-03 23:52:00 【问题描述】:我已经在我的项目中使用 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;
还有另一个名为ToastMessage
的组件接收message
属性,类型为ToastMessageData
:
interface ToastMessageProps
message: ToastMessageData;
style: React.CSSProperties;
const ToastMessage: React.FC<ToastMessageProps> = ( message, style ) =>
我觉得从组件内部的上下文中导入接口很奇怪,所以发生了一些错误。
你们有什么推荐的吗?
【问题讨论】:
【参考方案1】:一般来说,如果类型别名/接口仅特定于组件,则可以将其写入同一个 .tsx
文件中,因为您可以认为它们是“本地”用于该组件的。
但是,在某些情况下,您可能需要在其他组件或其他帮助文件中重用该类型别名/接口(例如,组件 A 的接口扩展了组件 B 的接口)。为此,最好将类型别名/接口存储在单独的文件中。例如,您可以直接拥有一个共享,其中包含要导出的所有常见类型别名/接口。
- pages
- ComponentA
- ComponentB
- shared
- interfaces
- messages.interface.ts
- geo.interface.ts
// etc
- services
- helper
// etc
这样做的主要优点是您将能够防止cyclic dependencies 的风险,尤其是当您发现您正在编写多个组件相互导出和导入内容的代码时。
【讨论】:
以上是关于如何在带有 Typescript 的 React 项目中组织类型定义的主要内容,如果未能解决你的问题,请参考以下文章
如何在 TypeScript 中使用带有 React 无状态功能组件的子组件?
如何在 React 上正确使用带有样式组件画布的 TypeScript 类型
React-native:如何在 React-native 中使用(和翻译)带有 jsx 的 typescript .tsx 文件?
你如何在带有 Typescript 的 create-react-app 中使用 Mocha?