使用类型别名与接口在 Typescript 中注释 React 功能组件

Posted 2023-03-13

【中文标题】使用类型别名与接口在 Typescript 中注释 React 功能组件

【英文标题】：Annotating React functional component in Typescript with Type Alias vs Interface

【发布时间】：2020-05-06 18:42:49

【问题描述】：

问题：

我正在用 Typescript 重写我的 React 应用程序。我正在尝试将所有组件实现为功能组件。

Typescript 允许我们使用Type Aliases 和Interfaces 来定义对象的形状或函数签名。我已经经历过Types vs Interfaces之间的区别了。

我阅读的大多数文章都通过使用可以使用类型别名的接口来定义组件。据我所知，接口和类型别名对于 React 组件给出相同的结果，那么为什么几乎在每个定义中都使用接口

我尝试了几篇关于为什么主要使用接口而不是类型别名的文章，但找不到任何有用的东西。

用interface或类型别名注释 React 组件 props 的最佳方法是什么？

接口示例：

interface AppProps 
  color?: string;


const App = (props: AppProps) : JSX.Element => 
  return <div>props.color</div>

【问题讨论】：

不确定这里会有明确的答案。正如您所说，使用接口或类型别名都会产生相同的结果，因此在这种情况下可能没有任何技术理由偏爱其中一个。选择一个并保持一致。您提到几乎在每个定义中都使用了接口。这本身就是坚持使用界面的理由。为什么要打破传统？

但是在完全不需要扩展接口的情况下使用接口是没有意义的。为其构建类型别名。我们不能在不理解为什么的情况下盲目跟随，对吧？那是我的问题。为什么他们在这种情况下采用接口也可以很容易地使用类型别名。

正如链接问题中的一条评论所述，少数区别之一是能够进行“声明合并”。除此之外，它们几乎可以互换，您应该保持一致。

@zero298 明白了。注释组件道具的用例都与声明合并无关。这就是为什么我很困惑为什么没有人为它使用类型别名。

你看到 React 组件的“接口”而不是“类型”的原因是通常你会使用“接口”来定义对象的形状和方法。虽然你可以使用“类型”，但它更适合定义一个单一的东西，一个类型而不是一个形状。

【参考方案1】：

这是我从其他论坛、cmets 等开发者那里得到的汇总答案。

没有明确的方法或答案，因为没有人知道为什么不使用类型别名。

另一方面，使用接口的好处是

它有助于使代码结构整洁。

当你有形状和方法时，你最终会使用接口而不是类型 - 所以对另一个没有方法的人遵循相同的方法，这将使其可读且易于遵循。

一种非常方便的模式，大多数人都遵循这种传统方法。

【讨论】：

我个人更喜欢类型别名而不是接口。我对您的问题的理论是，“接口”一词听起来更正式，并且在语义上看起来更适合库。简而言之，这是一种时尚/人性化的东西。