interface IUsers {
id: number;
name: string;
}
export const fetchUsers = () =>
fetch(`/users`).then((res) => res.json());
How do I add IUsers type to fetchUsers response? fetchUsers return [{id:1, name:'fay'}].
1 Answer
Assuming that you have already written this:
export interface iUsers {
id : number
name : string
}
Modify your method like this:
export const fetchUsers = async () : Promise<{ data : iUsers[] }> => {
const response = await fetch(`/users`) ;
const data : iUsers[]= await response.json()
return { data }
}
And use it like this :
const { data } = await fetchUsers();
You can hover on your IDE for the hints, it will show that data is an iUsers[]
EDIT This is the shorted version you wanted, which might not match your requirements
export const fetchUsers = async () : Promise<iUsers[] > => await (await fetch(`/users`)).json() ;
and use it like this :
const data = await fetchUsers()
8 Comments
Fay Chen
it worked! so you can't use destructing with typescript?
tsamridh86
you can use it - in fact, that's what i've done here, it's just that you required the result to be in this way, i manipulated it to be so
Fay Chen
I mean if it's
const { data: PutMyTypeHere } = 'something' is not possible rightFay Chen
How can you reduce 3 lines of your code above in a function to lesser line? you can't right?
tsamridh86
I could, it might look uglier, and not match your requirements, let me edit and add that
|
fetchUser = () : iUsers => { // your logic }?fetch(`/users`).then((res) => res.json() as iUsers );?Conversion of type 'Promise<any>' to type 'IUsers' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.res.json()and what you expect as the final output?