React Typescript 键入一个 void 函数

Question

为什么在输入不应返回任何内容的函数然后访问返回某些值的props.onClick内部Message组件后不会出现错误？

type MessageProps = {
  onClick: () => void,
  value?: string
}

const Message: React.FunctionComponent<MessageProps> = (props: any) => {
  return (
    <>
      <h1>Example message</h1>
      <button onClick={props.onClick}>click</button>
    </>
  )
}

const App = (props: any) => {
  return (
    <div className="App">
      <Message onClick={() => 2} />
    </div>
  );
}

export default App;

Answer 1

从根本上来说，您要问的是为什么此分配不会导致错误：

\n

type VF = () => void;\n\nconst f: VF = () => 2;\n

\n

（游乐场）

\n

这是因为具有void返回类型的函数类型并不要求分配的函数不返回任何内容。从文档中：

\n

\n

返回类型void

\n

函数的返回void类型可能会产生一些不寻常但预期的行为。

\n

返回类型为 的上下文类型void不会强制函数不返回某些内容。另一种说法是，这是一个具有void返回类型（type vf = () => void）的上下文函数类型，在实现时可以返回任何其他值，但它将被忽略。

\n

\n

（他们的强调）

\n

如果你仔细想想，这是有道理的，因为如果没有明确的return，或者没有return;值，所有 JavaScript 函数都会返回一些内容\xc2\xa0\xe2\x80\x94 ，那么返回值为undefined。

\n

\r\n

\r\n

function a() { }\nfunction b() { return; }\nconsole.log("a", a());\nconsole.log("b", b());

\r\n

\r\n

\r\n

\n

（我认为JavaScript 规范中的这里[for a] 和这里[for ] 已经涵盖了这一点，只是为了它的价值。）b

\n