React组件中状态更新函数属性的TypeScript定义优化

在React组件开发过程中，将useState返回的状态更新函数作为属性传递给子组件是一种常见做法。这种方法可以使状态管理逻辑更加模块化，但同时也需要确保类型安全性。

优化前的代码

import { useState } from "react";
import type { FC } from 'react';

interface AddProps {
  onChange: (e: any) => void;
}

const Add: FC<AddProps> = ({ onChange }) => {
  return <button onClick={() => {
    onChange((data: number) => data + 1);
  }}>Click me!</button>
}

const MyComponent = () => {
  const [count, setCount] = useState(1);
  return (
    <>
      数量：{count}
      <Add onChange={setCount} />
    </>
  );
};

export default MyComponent;

优化前的问题

• Add组件的onChange属性类型定义为(e: any) => void，其中e被定义为any类型，这种做法牺牲了类型安全。
• 传递给onChange的是setCount函数，它既可以接收一个数字也可以接收一个函数。因此，我们需要更准确地定义e的类型。可以将 e 的类型定义为 number | ((prevState: number) => number)。但是这种定义都不便捷。

类型安全的改进

为了提高类型安全性，我们可以利用@types/react提供的Dispatch<SetStateAction>泛型类型来定义onChange属性。这个泛型类型允许我们指定状态更新函数可以接收的参数类型，使得类型定义更加严格和准确。

优化后的代码

import { useState } from "react";
import type { FC, Dispatch, SetStateAction } from 'react';

interface AddProps {
  onChange: Dispatch<SetStateAction<number>>;
}

const Add: FC<AddProps> = ({ onChange }) => {
  return <button onClick={() => onChange(data => data + 1)}>Click me!</button>;
}

const MyComponent = () => {
  // 明确指定useState的类型参数为number
  const [count, setCount] = useState<number>(1); 
  return (
    <>
      数量：{count}
      <Add onChange={setCount} />
    </>
  );
};

export default MyComponent;

关键优化点

• 使用Dispatch<SetStateAction<number>>来定义onChange属性的类型，这样既可以接收一个直接的数字也可以接收一个返回数字的函数，保证了类型的准确性和安全性。
• 在Add组件的onClick事件处理函数中直接传递更新函数(data => data + 1)给onChange，这里不需要显式指定data的类型，因为它会根据onChange的类型自动推断出来。

通过这些优化，我们不仅保证了代码的类型安全性，还使得组件间的状态管理逻辑更加清晰和易于维护。