为什么 typescript 不警告这个 function 中的返回类型？

Question

For example, I have an onClick handler on a <div> tag. The handler should expect a return type of React.MouseEventHandler<HTMLDivElement> | undefined React.MouseEventHandler<HTMLDivElement> | undefined . But, I still can return a boolean value of false when temp = false . Got confused here why Typescript did not warn me about the return type

import React from 'react';

const Dummy= () => {
  const [temp, settemp] = React.useState(false)
  const [text, settext] = React.useState('Hi')

  const handler : React.MouseEventHandler<HTMLDivElement> | undefined  = () =>{
    return temp && settext('bye')
    //return temp
    
  }
  return (
   <div onClick={handler}> Testing </div>
  );
};

export default Dummy;

Answer 1

You're telling typescript that the handler variable is React.MouseEventHandler<HTMLDivElement> | undefined React.MouseEventHandler<HTMLDivElement> | undefined . Note that it is never actually undefined, as it is a const and is therefore only ever a function. You're not telling it what the function's return type is. These are two different things. The return type is either derived from what you return in the function, or you can explicitly declare it after the parameters, like this:

let sum = (x: number, y: number): number => {
    return x + y;
}