I'm new to Typescript and I'm having trouble passing arguments to a function in Typescript. This function is called when I render a form modal.But I end up getting two errors:
"Argument of type 'Promise<AxiosResponse>' is not assignable to parameter of type '(data: Record<string, unknown>) => Promise'."
"Type 'Promise<AxiosResponse>' provides no match for the signature '(data: Record<string, unknown>): Promise'."
function openModal(activity) {
const data = ref({
name: activity.name,
})
formRender.render(activity, updateActivity(activity.id,{name:data.value.name}))
}
This would be the function:
export function updateActivity(id: number, data: Record<string, unknown>) {
return http.patch(`/${id}`, { name: data.name })
}
FormRender:
export function FormRender<T extends Record<string, unknown>>(formName: string) {
return {
render(formAttributes: T | Record<string, unknown>, service: (data: T) => Promise<unknown>) {
dialog({
component: FormRender,
componentProps: {
formName,
formAttributes,
service
},
})
},
export function updateActivity(id: number, data: Record<string, unknown>) {
return http.patch(`/${id}`, { name: data.name })
}
This function returns Promise<AxiosResponse<any, any>>. It's an async function which means you'll have to await the result to get the value returned from the HTTP request.
To get the data out of this type you must first await it, and then fetch the data property of the axios response:
export async function updateActivity(id: number, data: Record<string, unknown>) {
const response = await http.patch(`/${id}`, { name: data.name })
return response.data // This may require a JSON.parse or further prep depending on what the API returns
}
Now since the service argument is typed as a function, you should be able to pass a function that calls this method:
formRender.render(activity, (data) => updateActivity(activity.id, {name:data.value.name}))