TypeScript 和 React：'React.HTMLProps<T>' 和 'JSX.IntrinsicElements["T"]' 之间有什么区别

Question

我正在寻找最“规范”和/或“最新”的方法来将一组默认 HTML 属性作为一组允许的 TypeScript 属性添加到自定义的“增强”HTML 组件中，比如说一个Button.

我发现了两个类型定义。第一个是React.HTMLProps<T>，第二个JSX.IntrinsicElements["T"]。

所以我可以Button通过这种方式增强我的能力：

type Props = {
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: "button" | "submit" | "reset"
  className?: string
} & React.HTMLProps<HTMLButtonElement> 

或者像这样：

type Props = {
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: "button" | "submit" | "reset"
  className?: string
} & JSX.IntrinsicElements["button"]

我已经尝试了两种方法，它们似乎都工作得很好（没有弯曲的红线）。

问题是：这些类型定义之间是否存在显着差异？我应该使用React.HTMLProps<T>, JSX.IntrinsicElements["T"]，还是这只是个人喜好问题？

谢谢。

稍微相关的问题