Fix TypeScript errors in "Configuration" & "Routing and navigation" code snippets (#14089)

Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>

Author: ArmandPhilippot

src/content/docs/en/guides/internationalization.mdx

@@ -201,11 +201,11 @@ Astro provides helper functions for your middleware so you can control your own
 ```js title="src/middleware.js"
 import { defineMiddleware } from "astro:middleware";
 import { redirectToDefaultLocale } from "astro:i18n"; // function available with `manual` routing
-export const onRequest = defineMiddleware(async (ctx, next) => {
-  if (ctx.url.startsWith("/about")) {
+export const onRequest = defineMiddleware((ctx, next) => {
+  if (ctx.url.pathname.startsWith("/about")) {
     return next();
   } else {
-    return redirectToDefaultLocale(302);
+    return redirectToDefaultLocale(ctx, 302);
   }
 })
 ```

src/content/docs/en/guides/middleware.mdx

@@ -257,6 +257,8 @@ When you have multiple middleware functions chained via [sequence()](#chaining-m
 Calling `next()` with this signature will create a new `Request` object using the old `ctx.request`. This means that trying to consume `Request.body`, either before or after this rewrite, will throw a runtime error. This error is often raised with [Astro Actions that use HTML forms](/en/guides/actions/#call-actions-from-an-html-form-action). In these cases, we recommend handling rewrites from your Astro templates using `Astro.rewrite()` instead of using middleware.    
 
 ```js title="src/middleware.js"
+import { sequence } from "astro:middleware";
+
 // Current URL is https://example.com/blog
 
 // First middleware function

src/content/docs/en/guides/prefetch.mdx

@@ -100,7 +100,7 @@ As some navigation might not always appear as `<a />` links, you can also prefet
   import { prefetch } from 'astro:prefetch';
 
   const btn = document.getElementById('btn');
-  btn.addEventListener('click', () => {
+  btn?.addEventListener('click', () => {
     prefetch('/about');
   });
 </script>
@@ -158,11 +158,13 @@ To use `prefetch()` programmatically with large sets of links, you can set `eage
 <a class="link-moderate" href="/nice-link-20">A Nice Link 20</a>
 
 <script>
-  import { prefetch } from 'astro:prefetch';
+  import { prefetch } from "astro:prefetch";
 
-  const linkModerate = document.getElementsByClassName('link-moderate');
-  linkModerate.forEach((link) => prefetch(link.getAttribute('href'), {eagerness: 'moderate'}));
-  
+  const linkModerate = document.getElementsByClassName("link-moderate");
+  for (const link of linkModerate) {
+    const href = link.getAttribute("href");
+    if (href) prefetch(href, { eagerness: "moderate" });
+  }
 </script>
 ```
 

src/content/docs/en/guides/typescript.mdx

@@ -307,13 +307,14 @@ Astro includes helpers for working with the types returned by your [`getStaticPa
 
 You can get the type of [`Astro.params`](/en/reference/api-reference/#params) with `InferGetStaticParamsType` and the type of [`Astro.props`](/en/reference/api-reference/#props) with `InferGetStaticPropsType` or you can use `GetStaticPaths` to infer both at once:
 
-```astro title="src/pages/posts/[...id].astro" {2-6,18-19} "satisfies GetStaticPaths;"
+```astro title="src/pages/posts/[...id].astro" {2-6,19-20} "satisfies GetStaticPaths;"
 ---
 import type {
   InferGetStaticParamsType,
   InferGetStaticPropsType,
   GetStaticPaths,
 } from "astro";
+import { getCollection } from "astro:content";
 
 export const getStaticPaths = (async () => {
   const posts = await getCollection("blog");
@@ -328,7 +329,7 @@ export const getStaticPaths = (async () => {
 type Params = InferGetStaticParamsType<typeof getStaticPaths>;
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const { id } = Astro.params as Params;
+const { id } = Astro.params;
 //                   ^? { id: string; }
 
 const { title } = Astro.props;