diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx
index 2e5d420c30002..2291c8f6e9fec 100644
--- a/src/content/docs/en/basics/layouts.mdx
+++ b/src/content/docs/en/basics/layouts.mdx
@@ -238,22 +238,34 @@ const { title, fancyJsHelper } = Astro.props;
Learn more about Astro’s Markdown and MDX support in our [Markdown/MDX guide](/en/guides/markdown-content/).
-## Using one Layout for `.md`, `.mdx`, and `.astro`
+### Using TypeScript with layouts
-A single Astro layout can be written to receive the `frontmatter` object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files.
+Any astro layout can be modified to introduce typesafety & autocompletion by providing the types for your props:
-In the example below, the layout will display the page title either from a frontmatter YAML `title` property or from an Astro component passing a `title` attribute:
-
-```astro /{?title}?/ /Astro.props[.a-z]*/
+```astro ins={2-7} title="src/components/MyLayout.astro"
---
-// src/components/MyLayout.astro
-const { title } = Astro.props.frontmatter || Astro.props;
+interface Props {
+ title: string;
+ description: string;
+ publishDate: string;
+ viewCount: number;
+}
+const { title, description, publishDate, viewCount } = Astro.props;
---
-
-
+
+
+
+
+ {title}
+
- {title}
-
+
+
+
+
```