TypeScript中如何标记函数参数为函数类型？兼问组件返回类型

一、如何正确标记props中的函数类型 #

你之前的错误在于把整个props对象的类型指定为Function，但props是一个包含onShowCity属性的对象，Function类型并不包含这个属性，所以会报错。正确的做法是定义props的类型为一个对象，明确指定onShowCity的函数类型：

方法1：内联类型定义 #

直接在参数中写出props的结构：

const SelectCity = ({ onShowCity }: { onShowCity: (value: boolean) => void }): JSX.Element => {
  // 组件逻辑
  return <div>...</div>;
};

这里(value: boolean) => void表示这个函数接受一个布尔值参数，没有返回值，刚好匹配你的setShowCity（useState返回的setter传入布尔值时就是这个类型）。

方法2：使用接口/类型别名（更推荐，利于复用） #

如果多个组件需要用到相同的props类型，定义接口更清晰：

// 定义props类型接口
interface CitySelectorProps {
  onShowCity: (value: boolean) => void;
}

const SelectCity = ({ onShowCity }: CitySelectorProps): JSX.Element => {
  // 组件逻辑
  return <div>...</div>;
};

方法3：使用React内置的Dispatch类型（最准确） #

因为setShowCity其实是React的Dispatch<SetStateAction<boolean>>类型，它不仅支持直接传入布尔值，还支持传入函数式更新（比如setShowCity(prev => !prev)），用这个类型能覆盖所有合法的调用方式：

import { Dispatch, SetStateAction } from 'react';

interface CitySelectorProps {
  onShowCity: Dispatch<SetStateAction<boolean>>;
}

const SelectCity = ({ onShowCity }: CitySelectorProps): JSX.Element => {
  // 组件逻辑
  return <div>...</div>;
};

二、JSX.Element是函数式组件返回值的正确类型吗？ #

JSX.Element可以用，但不是最全面的选择：

• JSX.Element仅代表单个JSX元素，如果你组件返回null、undefined、字符串、数字或者多个JSX元素的数组，用JSX.Element会触发类型报错。
• 更推荐使用React.ReactNode，它包含了所有React组件合法的返回值类型（JSX元素、字符串、数字、null、undefined、元素数组等），适配场景更广泛。

示例：

import { Dispatch, SetStateAction, ReactNode } from 'react';

interface CitySelectorProps {
  onShowCity: Dispatch<SetStateAction<boolean>>;
}

const SelectCity = ({ onShowCity }: CitySelectorProps): ReactNode => {
  // 合法返回null
  if (someCondition) return null;
  // 合法返回字符串
  if (anotherCondition) return '选择城市';
  // 合法返回JSX元素
  return <div>城市选择组件</div>;
};

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