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

Question

问题：

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

Typescript 允许我们使用类型别名和接口来定义对象或函数签名的形状。我已经了解了类型与接口之间的区别。

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

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

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

接口示例：

interface AppProps {
  color?: string;
}

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

Answer 1

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

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

另一方面，使用 Interface 的优点是

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

2. 当你有形状和方法时，你最终会使用接口而不是类型 - 因此，对于其他没有方法的人来说，遵循相同的做法将使其可读且易于遵循。

3. 这是一种非常方便的模式，被大多数人作为传统方法遵循。