如何指定特定JSX元素的返回类型？返回Button元素的函数该标注什么类型

这种操作完全可以实现，返回UI元素的函数本质就是轻量的无状态组件，在业务开发中非常常用。

你示例中直接标注返回类型为Button是错误的：你返回的不是Button组件本身的构造/声明类型，而是这个组件渲染生成的JSX节点，所以需要用专门的JSX相关类型标注，以下是React+TypeScript技术栈下的常用正确写法：

• 通用适配写法：用JSX.Element，所有合法的JSX节点（不管是原生DOM标签还是自定义组件）都可以用这个类型标注，修改后的代码如下：

const clickMeButton = (): JSX.Element => {
  return (
    <Button>
      Click Me
    </Button>
  )
}

• 更严格的类型校验：可以使用React内置的ReactElement类型，需要提前从react包导入类型定义：

import type { ReactElement } from 'react'

const clickMeButton = (): ReactElement => {
  return <Button>Click Me</Button>
}

• 特殊场景补充：如果你的函数存在返回null的逻辑，只需要把返回类型改为JSX.Element | null或者ReactElement | null即可。
• 如果你打算把这个函数直接作为组件调用，也可以直接对函数本身标注FC（Function Component）类型，不需要额外标注返回值类型：

import type { FC } from 'react'

const ClickMeButton: FC = () => {
  return <Button>Click Me</Button>
}

内容的提问来源于stack exchange，提问作者Chris