TypeScript 中如何为组件 props 中的 closeModal 函数做类型校验

你无需使用Dispatch类型，你当前场景下的closeModal是无参数、无返回值的函数，直接使用() => void定义类型即可，具体写法如下：

1. 定义组件Props类型 #

优先用你当前场景最适配的基础函数类型：

// type 写法
type ManualBeatFormProps = {
  productId: string;
  activeEnvironment: string;
  closeModal: () => void;
}

// 也可以用interface写法
interface ManualBeatFormProps {
  productId: string;
  activeEnvironment: string;
  closeModal: () => void;
}

2. 给组件绑定类型 #

普通函数组件写法 #

const ManualBeatForm = (props: ManualBeatFormProps) => {
  const { closeModal, productId, activeEnvironment } = props;
  // 组件后续逻辑
}

React FC 泛型写法 #

import type { FC } from 'react';

const ManualBeatForm: FC<ManualBeatFormProps> = ({ closeModal, productId, activeEnvironment }) => {
  // 组件后续逻辑
}

补充说明：什么时候用Dispatch？ #

Dispatch是专门对应React useState返回的更新函数的类型，只有当你直接把setManualBeatModalOpen作为props传给子组件时，才需要用这个类型：

// 父组件直接传set函数
<ManualBeatForm setModalOpen={setManualBeatModalOpen} />

// 对应子组件props类型定义
import type { Dispatch, SetStateAction } from 'react';

type ManualBeatFormProps = {
  setModalOpen: Dispatch<SetStateAction<boolean>>;
}

你当前的传参是封装了一层的箭头函数，不需要接收参数也不需要返回值，() => void是最准确的类型，不需要引入额外的类型。

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