如何在打字稿中为 () => 调度(操作)设置类型？

Question

我是打字和转换我的jsx到tsx文件的新手。如何为我的onPressprop定义redux分派的类型?我试着使用了"功能"。以及"appdispatch_"。提前感谢

import { AppDispatch } from "../redux/store"

interface ItemProps {
item: Custom_date, 
onPress: AppDispatch, //What should I put here?
backgroundColor: any,
textColor: any
}
const Item = ({ item, onPress, backgroundColor, textColor }: ItemProps) => (
<TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
<Text style={[styles.dateTitle, textColor]}>{item.title}</Text>
</TouchableOpacity>
);
export const DateHeader = () => {
const { date } = useSelector((store: RootState) => store.nutrition)
const dispatch = useDispatch()
const renderItem = ({ item }) => {
const backgroundColor = item.id === date.id ? "#033F40" : "#BDF0CC";
const color = item.id === date.id ? '#BDF0CC' : '#033F40';
return (
<Item
item={item}
onPress={() => dispatch(setDate(item))}
backgroundColor={{ backgroundColor }}
textColor={{ color }}
/>
);
}
return (<>
<FlatList {props} />
</>)
}

Answer 1

键入一个函数只需要知道参数类型和返回类型。为了找到dispatch()的返回类型，您可以检查useDispatch()的内部，但作为一般规则(有相当多的例外)，单击处理程序不会返回任何东西。函数产生的任何副作用，比如更新变量、调用API或更新数据库，都不会包含在类型签名中。

您也没有在onPress中传递任何参数，正如您可以从定义箭头函数的空括号中看出的那样，这大大简化了事情。

如果您调用的分派函数没有返回值，那么您的onPress的类型很可能如下所示:

interface ItemProps {
item: Custom_date, 
onPress: () => void,
backgroundColor: any,
textColor: any
}