reactjs - 使用类型别名与接口(interface)在 Typescript 中注释 React 功能组件

标签 reactjs typescript

问题:
我正在用 Typescript 重写我的 React 应用程序。我正在尝试将所有组件实现为功能组件。
Typescript 允许我们使用 Type AliasesInterfaces定义对象的形状或函数签名。 Types vs Interfaces之间的区别我已经经历过了.
我读过的大多数文章都通过使用可以使用类型别名的接口(interface)来定义一个组件。据我所知,接口(interface)和类型别名都为 React 组件提供相同的结果,那么为什么几乎在每个定义中都使用接口(interface)
我尝试了几篇关于为什么主要使用接口(interface)而不是类型别名的文章,但找不到任何有用的东西。
使用 注释 React 组件 Prop 的最佳方法是什么?接口(interface)或与 类型别名 ?
接口(interface)示例 :

interface AppProps {
  color?: string;
}

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

最佳答案

这是我从其他论坛、评论等的开发人员那里得到的汇总答案。
对此没有明确的方法或答案,因为没有人知道为什么不使用类型别名。
另一方面,使用接口(interface)的好处是

  • 它有助于将代码结构化。
  • 当你有形状和方法时,你最终会使用接口(interface)而不是类型 - 所以对另一个没有方法的人遵循相同的方法,这将使其可读且易于遵循。
  • 一种非常方便的模式,大多数人都遵循这种传统方法。
  • 关于reactjs - 使用类型别名与接口(interface)在 Typescript 中注释 React 功能组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59828659/

    相关文章:

    unit-testing - 向 React 组件发送 props 以进行 Jest 单元测试

    javascript - 在 onBlur 模式下使用 react-hook-form 启用/禁用提交按钮

    css - 如何修改 Tabs 组件的包装器 css 规则,使文本在 Material-UI 的垂直选项卡中左对齐?

    angular - Karma 使用内置管道的自定义管道测试 Angular X (5) 组件

    javascript - 添加自定义 @polkadot/types 时 Polkadot-js Babel 错误

    javascript - 日期以奇怪的方式显示 Angular 6

    javascript - 无法从 Angular 5 和 Dragula 制作多个内部可拖动对象

    javascript - ReactJS - 有一个不拥有它的 child 的 "main"组件?

    reactjs - react 路由器在改变路线之前不等待动画

    node.js - 如果存在 "declaration merging"x");",则 Typescript "import x = require("不起作用