react项目中typescript类型的问题

在看react项目时，遇到了ts类型的问题，有行代码看不懂

import React from 'react';

export type TabProps = {
  curStep: Number;
  onStepClick?: React.Dispatch<React.SetStateAction<number>>;
};

const Tab: React.FC<TabProps> = (props) => {
  const { curStep = 0, onStepClick } = props;
  //do something
}

不理解的地方

这行代码没看懂是什么意思，求具体解答🤗

  onStepClick?: React.Dispatch>;

ts 了解一点点,
?: 代表此参数不是可选的, 不是必要参数.
?: 后面的, 应该是代表的一个类型

这行代码表示Tab组件接受来自父组件传参props的Hooks中setState的类型，onStepClick后的“?”表示可有可无(即undefined)

  onStepClick?: React.Dispatch<React.SetStateAction<number>>;

你可以用这段代码试试效果，当点击Tap组件的Button时，curStep的值会加1.

import React from 'react';
 
export type TabProps = {
  curStep: number; // 这里是number类型，不是Number
  onStepClick?: React.Dispatch<React.SetStateAction<number>>;
};
 
const Tab: React.FC<TabProps> = (props: TabProps) => {
  const { curStep = 0, onStepClick } = props;
  return (
    <>
      <p>curStep: {curStep}</p>
      {onStepClick !== undefined ? (
        <button onClick={() => onStepClick(curStep + 1)}>click</button>
      ) : (
        <button
          onClick={() => {
            console.log('onStepClick is undefined');
          }}
        >
          click
        </button>
      )}
    </>
  );
};


const App: React.FC = () => {
  const [step, setStep] = useState<number)(1);
  const [step1, setStep1] = useState<number>(1);
  return (
    <>
      <Tab curStep={step} onStepClick={setStep} />
      <Tab curStep={step1}  />
    </>
  )
}