Fix TS errors in reference/astro-syntax.mdx (#14237)

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

Author: ArmandPhilippot

src/content/docs/en/reference/astro-syntax.mdx

@@ -35,6 +35,7 @@ Local variables can be used in curly braces to pass attribute values to both HTM
 
 ```astro title="src/components/DynamicAttributes.astro" "{name}" "${name}"
 ---
+import MyComponent from "./MyComponent.astro";
 const name = "Astro";
 ---
 <h1 class={name}>Attribute expressions are supported</h1>
@@ -66,7 +67,7 @@ Instead, use a client-side script to add the event handler, like you would in va
   function handleClick () {
     console.log("button clicked!");
   }
-  document.getElementById("button").addEventListener("click", handleClick);
+  document.getElementById("button")?.addEventListener("click", handleClick);
 </script>
 ```
 :::
@@ -243,7 +244,7 @@ A callback function passed as `<Shout />`’s child will receive the all-caps `m
 import Shout from "../components/Shout.astro";
 ---
 <Shout message="slots!">
-  {(message) => <div>{message}</div>}
+  {(message: string) => <div>{message}</div>}
 </Shout>
 
 <!-- renders as <div>SLOTS!</div> -->
@@ -254,7 +255,7 @@ Callback functions can be passed to named slots inside a wrapping HTML element t
 ```astro
 <Shout message="slots!">
   <fragment slot="message">
-    {(message) => <div>{message}</div>}
+    {(message: string) => <div>{message}</div>}
   </fragment>
 </Shout>
 ```
@@ -265,23 +266,24 @@ Use a standard HTML element for the wrapping tag or any lowercase tag (e.g. `<fr
 
 `Astro.self` allows Astro components to be recursively called. This behavior lets you render an Astro component from within itself by using `<Astro.self>` in the component template. This can help iterate over large data stores and nested data structures.
 
-```astro
+```astro title="src/components/NestedList.astro" {14}
 ---
-// NestedList.astro
+type Props = {
+  items: (string | string[])[];
+};
 const { items } = Astro.props;
 ---
+
 <ul class="nested-list">
-  {items.map((item) => (
-    <li>
-      <!-- If there is a nested data-structure we render `<Astro.self>` -->
-      <!-- and can pass props through with the recursive call -->
-      {Array.isArray(item) ? (
-        <Astro.self items={item} />
-      ) : (
-        item
-      )}
-    </li>
-  ))}
+  {
+    items.map((item) => (
+      <li>
+        {/* If there is a nested data-structure we render `<Astro.self>` */}
+        {/* and can pass props through with the recursive call */}
+        {Array.isArray(item) ? <Astro.self items={item} /> : item}
+      </li>
+    ))
+  }
 </ul>
 ```
 
@@ -307,4 +309,4 @@ And would render HTML like this:
   </li>
   <li>D</li>
 </ul>
-```
+```