如何在react native中使用typescript声明带有可选输入参数的onPress函数 &

Question

我使用typescript与react-native一起工作。我想要一个带有可选的onPress方法布尔输入参数。我想直接传递给它到onPress方法，如果没有输入，则不创建新的arrow function。像下面的代码:

const onClose(clearMessages?: boolean) => {
// doing stuff
if (clearMessages) {
// doing extra stuff
}
}
// use it like this
<Pressable onPress={onClose}>
<Text>{'Close'}</Text>
</Pressable>
<Pressable onPress={() => onClose(true)}>
<Text>{'Clear messages'}</Text>
</Pressable>

问题是当我直接调用onClose时，我得到下面的typescript错误:

类型"(clearMessage吗?: boolean) =>(事件:GestureResponderEvent) =>void'不能分配给类型'(event: GestureResponderEvent) =>无效"。参数"clearMessage"one_answers"event"的类型不兼容。类型'GestureResponderEvent'不能分配给类型'boolean'.ts(2322)

Answer 1

这是意料之中的错误!因为当您不自己调用onClose函数并将其传递给pressable时，那么pressable期望具有以下签名的函数

((event: GestureResponderEvent) => void)

onPress传递了类型为GestureResponderEvent的参数，而在onClose函数中，您期望的是boolean，因此错误

IMHO这看起来很干净，尽管

onPress={() => onClose()}

如果你仍然想要它，那么你可以通过使用typescript的联合类型来实现它，只需改变你的onClose方法，如下所示

const onClose = (clearMessages?: GestureResponderEvent | boolean) => {
// doing stuff
if (typeof clearMessages === 'boolean') {
// doing extra stuff
}
};

再一次(如果你只通过true)，然后

const onClose = (clearMessages?: GestureResponderEvent | true) => {
// doing stuff
if (clearMessages === true) {
// doing extra stuff
}
};

Answer 2

你基本上可以创建一个函数来返回你需要的函数。

const createFn = (input) => () => { console.log(input); }
const printHelloWorld = createFn("hello");
printHelloWorld();

结合useCallback()，你可以创建你想要的onPress函数。

---

下面是一个关于零食。博览会。开发=>https://snack.expo.dev/TPFYRuthi

由于服务，它是在纯javascript中，但应该在typescript中工作。只需确保返回的函数(带有event参数)是onPress的预期Event类型。✌️

export default function App() {
const createOnClose = React.useCallback(
(clearMessages?: boolean) => (event) => {
if (clearMessages) {
console.log('clearing messages');
}
console.log('onClose');
},
[]
);
return (
<View>
<Pressable onPress={createOnClose()}>
<Text>{'Close'}</Text>
</Pressable>
<Pressable onPress={createOnClose(true)}>
<Text>{'Clear messages'}</Text>
</Pressable>
</View>
);
}