主页 / coding / 问题 / 78579891
Accepted
Pytan
Asked: 2024-06-05 17:06:54 +0800 CST

为什么 React props 可以将异步函数视为 `() => void` 而不是 `() => Promise<void>`？

  • 772

为什么 React props 可以采用带签名的异步函数() => void而不是() => Promise<void>签名而不会出现类型错误？是有意为之还是误用？

interface Props {
  onFunc: () => void
}

const Child = ({onFunc}: Props) => {
  // something
}


const Parent = ({onFunc}: Props) => {
  const func: () => Promise<void> = async () => {
    // something
  }

  return <Child onFunc={func}> 
}
reactjs

1 个回答

  1. Best Answer

    返回类型void仅仅意味着函数返回值的类型被忽略/不使用——即使它是隐式的undefined……或者在异步函数的情况下是一个承诺。 TypeScript 手册中的“函数的可分配性”部分对此进行了解释：

    返回类型void

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

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

    因此，该类型的以下实现() => void是有效的：

    type voidFunc = () => void;

const f1: voidFunc = () => {
  return true;
};

const f2: voidFunc = () => true;

const f3: voidFunc = function () {
  return true;
};

    当这些函数之一的返回值分配给另一个变量时，它将保留以下类型void：

    type voidFunc = () => void;

const f1: voidFunc = () => {
  return true;
};

const f2: voidFunc = () => true;

const f3: voidFunc = function () {
  return true;
};
// ---cut---
const v1 = f1();

const v2 = f2();

const v3 = f3();

    此行为的存在使得以下代码有效，即使Array.prototype.push返回一个数字并且该Array.prototype.forEach方法需要一个返回类型为 的函数void。

    const src = [1, 2, 3];
const dst = [0];

src.forEach((el) => dst.push(el));

    还有另一种特殊情况需要注意，当文字函数定义具有void返回类型时，该函数不得返回任何内容。

    function f2(): void {
  // @ts-expect-error
  return true;
}

const f3 = function (): void {
  // @ts-expect-error
  return true;
};

    有关更多信息，void请参阅这些其他文档条目：

    • 2

相关问题