diff --git a/src/content/docs/zh-cn/basics/layouts.mdx b/src/content/docs/zh-cn/basics/layouts.mdx
index 51facd87bfab4..20776d57783cd 100644
--- a/src/content/docs/zh-cn/basics/layouts.mdx
+++ b/src/content/docs/zh-cn/basics/layouts.mdx
@@ -230,22 +230,35 @@ const { title, fancyJsHelper } = Astro.props;
了解更多关于 Astro 的 Markdown 和 MDX 支持，请参阅 [Markdown/MDX 指南](/zh-cn/guides/markdown-content/)。
-## 对 `.md`, `.mdx`, 和 `.astro` 使用一个布局
+### 在布局中使用 TypeScript
-一个 Astro 布局可以编写以接收 `.md` 和 `.mdx` 文件中的 `frontmatter` 对象，以及从 `.astro` 文件传递的任何命名 props。
+任何 Astro 布局都可以通过提供 props 类型来引入类型安全和自动补全功能：
-在下面的示例中，布局将从 frontmatter YAML `title` 属性或 Astro 组件传递的 `title` 属性中显示页面标题：
-```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}
-
+
+
+
+
```