当我使用箭头功能时 ts 错误消失但当我不使用箭头时出现

Question

为什么我收到此错误消息：

Type '(message?: string | undefined) => void' is not assignable to type '(event: GestureResponderEvent) => void'.
  Types of parameters 'message' and 'event' are incompatible.
    Type 'GestureResponderEvent' is not assignable to type 'string'.ts(2322)

当我这样使用函数时：

  <Button onPress={handleToggleModalMessage} style={[ButtonStyles.full, s.noneBorderTop]}>
    <Text style={s.errorBtn}>Ok!</Text>
  </Button>

但是当我以这种方式使用上述函数时，我没有收到 ts 错误：

  <Button onPress={() => handleToggleModalMessage()} style={[ButtonStyles.full, s.noneBorderTop]}>
    <Text style={s.errorBtn}>Ok!</Text>
  </Button>

谁能解释一下为什么？

Answer 1

这个问题与react无关，所以让我用纯打字稿改写一下：

type FN = (event: GestureResponderEvent) => void;

function handler(message?: string | undefined) {
  console.log(message);
}

const f1: FN = handler;          // ERROR
const f2: FN = () => handler();  // OK

注意：

() => handler() 保证它将忽略传递给它的任何参数
handler可以使用它的参数，即message?: string | undefined

现在考虑：

const e: GestureResponderEvent = ...
f1(e);
f2(e);

两个调用都是合法的 - 两个函数的类型都是 FN。如果将 handler 赋值给类型 FN 是合法的，这意味着我们可以将类型 GestureResponderEvent 的参数传递给接受可选 string 的函数 - 这可能会中断运行时间。

Answer 2

你的第一个例子是推断参数，这意味着它传递了默认值。第一个例子相当于这个

<Button onPress={(event) => handleToggleModalMessage(event)} style={[ButtonStyles.full, s.noneBorderTop]}>
        <Text style={s.errorBtn}>Ok!</Text>
</Button>

handleToggleModalMessage(event) 的类型签名与您定义的不兼容。它不期望任何内容或字符串，但您传入的是 GestureResponderEvent

当我使用箭头功能时 ts 错误消失但当我不使用箭头时出现

ts error goes away when I use arrow function but come when I not use arrow

typescript

react-native

expo