Add Type Promise Results With The Awaited Type 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).
 
-_1197 TILs and counting..._
+_1199 TILs and counting..._
 
 ---
 
@@ -50,6 +50,7 @@ _1197 TILs and counting..._
 * [React Native](#react-native)
 * [React Testing Library](#react-testing-library)
 * [ReasonML](#reasonml)
+* [Remix](#remix)
 * [RSpec](#rspec)
 * [Ruby](#ruby)
 * [sed](#sed)
@@ -904,6 +905,10 @@ _1197 TILs and counting..._
 - [Using Optional Labeled Function Arguments](reason/using-optional-labeled-function-arguments.md)
 - [Wrapping A Component For Use In JavaScript](reason/wrapping-a-component-for-use-in-javascript.md)
 
+### Remix
+
+- [Run The Development Server From Another Port](remix/run-the-development-server-from-another-port.md)
+
 ### RSpec
 
 - [Check Specific Arguments To Received Method](rspec/check-specific-arguments-to-received-method.md)
@@ -1099,6 +1104,7 @@ _1197 TILs and counting..._
 - [Interfaces With The Same Name Are Merged](typescript/interfaces-with-the-same-name-are-merged.md)
 - [Re-Export An Imported Type](typescript/re-export-an-imported-type.md)
 - [Type Narrowing With Similarly Shaped Objects](typescript/type-narrowing-with-similarly-shaped-objects.md)
+- [Type Promise Results With The Awaited Type](typescript/type-promise-results-with-the-awaited-type.md)
 - [Use An Array Check For Type Narrowing](typescript/use-an-array-check-for-type-narrowing.md)
 - [Zero-Config Environments For Trying Out Types](typescript/zero-config-environments-for-trying-out-types.md)
 

remix/run-the-development-server-from-another-port.md

@@ -0,0 +1,22 @@
+# Run The Development Server From Another Port
+
+By default the [remix](https://remix.run/) development server runs on port
+`3000`. There are two ways that you can specify a different port using an
+environment variable.
+
+First, you can specify the port from the command line when starting up the
+server.
+
+```bash
+$ PORT=4444 npm run dev
+```
+
+Second, you can include the `PORT` environment variable in your `.env` file so
+that you don't have to remember to include it from the CLI each time. Add the
+following line to your `.env` file for that.
+
+```
+PORT=4444
+```
+
+Run `npm run dev` and you'll see the server start up at `localhost:4444`.

typescript/type-promise-results-with-the-awaited-type.md

@@ -0,0 +1,37 @@
+# Type Promise Results With the Awaited Type
+
+[TypeScript 4.5 introduces the `Awaited`
+type](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#the-awaited-type-and-promise-improvements)
+which can be used to model the resulting type of Promise and async/await code.
+
+The release notes give a couple helpful examples which I'll share:
+
+```typescript
+// A = string
+type A = Awaited<Promise<string>>;
+
+// B = number
+type B = Awaited<Promise<Promise<number>>>;
+
+// C = boolean | number
+type C = Awaited<boolean | Promise<number>>;
+```
+
+This can be taken a step further with an existing typed function and the help
+of the [`ReturnType`
+type](https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype).
+
+```typescript
+// getPosts' return type Promise<Array<Post>>
+import {getPosts} from './getPost'
+
+// type: { posts: Array<Post> }
+type LoaderData = {
+  posts: Awaited<ReturnType<typeof getPosts>>;
+}
+```
+
+It gets the full `typeof` of `getPosts`, whittles that down to the
+`ReturnType`, and then `Awaited` unwraps the promise. I learned this from the
+[Remix blog
+tutorial](https://remix.run/docs/en/v1/tutorials/blog#a-little-refactoring).