docs(tutorials/blog): add TS 4.9's satisfies in combination with LoaderFunction

contributors.yml

@@ -509,6 +509,7 @@
 - tjefferson08
 - tombiju
 - tombyrer
+- tom-sherman
 - TomerAberbach
 - tomer-yechiel
 - toyozaki

docs/tutorials/blog.md

@@ -195,6 +195,34 @@ export default function Posts() {
 
 Hey, that's pretty cool. We get a pretty solid degree of type safety even over a network request because it's all defined in the same file. Unless the network blows up while Remix fetches the data, you've got type safety in this component and its API (remember, the component is already its own API route).
 
+We can take the type safety a step further in TypeScript 4.9.0 using the `satisfies` keyword. This will ensure that we always return a type of `Response` from the loader instead of accidentally returning another type which would result in a runtime error.
+
+```ts filename=app/routes/posts/index.tsx lines=[1,23]
+import type { LoaderFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+
+type Post = {
+  slug: string;
+  title: string;
+};
+
+export const loader = (async () => {
+  return json({
+    posts: [
+      {
+        slug: "my-first-post",
+        title: "My First Post",
+      },
+      {
+        slug: "90s-mixtape",
+        title: "A Mixtape I Made Just For You",
+      },
+    ],
+  });
+}) satisfies LoaderFunction;
+```
+
 ## A little refactoring
 
 A solid practice is to create a module that deals with a particular concern. In our case it's going to be reading and writing posts. Let's set that up now and add a `getPosts` export to our module.