Add Get The Return Type Of An Async Function as a TypeScript TIL

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1270 TILs and counting..._
+_1271 TILs and counting..._
 
 ---
 
@@ -1181,6 +1181,7 @@ _1270 TILs and counting..._
 - [Extract Object Type Keys Into A Union Type](typescript/extract-object-type-keys-into-a-union-type.md)
 - [Extract Object Type Values Into A Union Type](typescript/extract-object-type-values-into-a-union-type.md)
 - [Generate Inferred Type From Zod Schema](typescript/generate-inferred-type-from-zod-schema.md)
+- [Get The Return Type Of An Async Function](typescript/get-the-return-type-of-an-async-function.md)
 - [Interfaces With The Same Name Are Merged](typescript/interfaces-with-the-same-name-are-merged.md)
 - [Narrow The Type Of An Array To Its Values](typescript/narrow-the-type-of-an-array-to-its-values.md)
 - [Re-Export An Imported Type](typescript/re-export-an-imported-type.md)

typescript/get-the-return-type-of-an-async-function.md

@@ -0,0 +1,47 @@
+# Get The Return Type Of An Async Function
+
+When working with TypeScript-first libraries like Prisma, you'll be working
+with functions that have useful, but complex type signatures. The TypeScript
+built-in [Utility
+Types](https://www.typescriptlang.org/docs/handbook/utility-types.html)
+make a big difference when working with these.
+
+For instance, a function that makes a couple Prisma calls with join'ed data
+will have a large return type that you can't easily recreate with imported
+types from the Prisma client.
+
+Given a function like this, we can start out extracting its return type with
+the
+[`ReturnType`](https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype)
+utility type, passing it the `typeof` the function as the generic.
+
+```typescript
+type FuncReturnType = ReturnType<typeof getPostsForUser>
+```
+
+A function like this is going to be async, so its return type will be wrapped
+in a promise. We can "unwrap" the promise with
+[`Awaited`](https://www.typescriptlang.org/docs/handbook/utility-types.html#awaitedtype).
+
+```typescript
+type FuncReturnType = ReturnType<typeof getPostsForUser>
+type ResolvedFuncReturnType = Awaited<FuncReturnType>
+```
+
+We are often querying for lists of things, so the result will be an array of
+the type we are interested in. We can extract the type of an array with
+`[number]`.
+
+```typescript
+type FuncReturnType = ReturnType<typeof getPostsForUser>
+type ResolvedFuncReturnType = Awaited<FuncReturnType>
+type PostType = ResolvedFuncReturnType[number]
+```
+
+Putting it all together into a single line looks like this:
+
+```typescript
+type Post = Awaited<ReturnType<typeof getPostsForUser>>[number]
+```
+
+[source](https://twitter.com/jbrancha/status/1603505456458207232)