geoff-young

📝📞📹💻
TypeScript
Created
Oct 12, 2021 06:15 PM
status

I want my IDE to show me what this function returns

const notionPages = await getBrowseTopics(notionId, username)
I've forgotten what this returns. When I hover over notionPages and getBrowseTopics:
notion image
notion image
 
I was confused as to why I couldn't see what this function returned with my IDE. It is showing my what it returns - a promise.
 
I have to explicitly type out what the promise resolves to. (An array with objects, with the following values:)
const getBrowseTopics = async ( notionId: string, username: string ): Promise<{
  username: string
  title: string
  titleUrl: string
  recordMap: Block
}[]> => {
	//function code
}
 
Now when I need to use that function I can mouse hover and see what it returns:
notion image
 
 
But what If I don't want to have the type inline? I want to reuse that Type.
export type TopicObjs = {
  username: string
  title: string
  titleUrl: string
  recordMap: Block
}
 
But now I don't see what the object returns in my VScode intellisense:
notion image
 
 
But with a little hack, there is a work-around. This stack overflow post has a solution.
Here I expand object types one level deep as opposed to recursively.
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
So now my code with this hacky work around looks like this:
const getBrowseTopics = async ( notionId: string, username: string ): Promise<Expand<TopicObjs>[]>
}[]> => {
	//function code
}
 
Back to how it was when the type was inline. 🙂
notion image