diff --git a/docs/advanced/cookbook/extending-a-theme.md b/docs/advanced/cookbook/extending-a-theme.md
index 13f8c592b3..2e02b51ecf 100644
--- a/docs/advanced/cookbook/extending-a-theme.md
+++ b/docs/advanced/cookbook/extending-a-theme.md
@@ -4,6 +4,9 @@ Sometimes you might want make some minor changes to a theme, but you may not wan
 
 With the help of [Theme API](../../reference/theme-api.md), you can extend a theme and make your own modifications:
 
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
 ```js
 const { path } = require('@vuepress/utils')
 
@@ -19,12 +22,40 @@ module.exports = {
 }
 ```
 
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import type { ThemeObject } from '@vuepress/core'
+import { path } from '@vuepress/utils'
+
+const fooTheme: ThemeObject = {
+  // your theme
+  name: 'vuepress-theme-foo',
+  // parent theme to extend
+  extends: 'vuepress-theme-bar',
+  // override layouts of parent theme
+  layouts: {
+    Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
+  },
+}
+
+export default fooTheme
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
 In this case, your `vuepress-theme-foo` will inherit all configuration, plugins and layouts from `vuepress-theme-bar`, and you can override corresponding layouts as needed.
 
 ## Extend Default Theme
 
 First, create the theme directory and theme entry `.vuepress/theme/index.js`:
 
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
 ```js
 const { path } = require('@vuepress/utils')
 
@@ -37,6 +68,28 @@ module.exports = {
 }
 ```
 
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import type { ThemeObject } from '@vuepress/core'
+import { path } from '@vuepress/utils'
+
+const localTheme: ThemeObject = {
+  name: 'vuepress-theme-local',
+  extends: '@vuepress/theme-default',
+  layouts: {
+    Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
+  },
+}
+
+export default localTheme
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
 You local theme will extends default theme, and override the `Layout` layout.
 
 Next, create `.vuepress/theme/layouts/Layout.vue`, and make use of the slots that provided by the `Layout` of default theme:
diff --git a/docs/zh/advanced/cookbook/extending-a-theme.md b/docs/zh/advanced/cookbook/extending-a-theme.md
index e1019feaab..ac5a8989f9 100644
--- a/docs/zh/advanced/cookbook/extending-a-theme.md
+++ b/docs/zh/advanced/cookbook/extending-a-theme.md
@@ -4,6 +4,9 @@
 
 借助于 [主题 API](../../reference/theme-api.md) ，你可以继承一个主题并添加你自己的改动：
 
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
 ```js
 const { path } = require('@vuepress/utils')
 
@@ -19,12 +22,40 @@ module.exports = {
 }
 ```
 
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import type { ThemeObject } from '@vuepress/core'
+import { path } from '@vuepress/utils'
+
+const fooTheme: ThemeObject = {
+  // 你的主题
+  name: 'vuepress-theme-foo',
+  // 要继承的父主题
+  extends: 'vuepress-theme-bar',
+  // 覆盖父主题的布局
+  layouts: {
+    Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
+  },
+}
+
+export default fooTheme
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
 在这个例子中，你的 `vuepress-theme-foo` 将会继承 `vuepress-theme-bar` 的全部配置、插件和布局，并且你可以按照需要来覆盖对应的布局。
 
 ## 继承默认主题
 
 首先，创建主题目录和主题入口 `.vuepress/theme/index.js` ：
 
+<CodeGroup>
+  <CodeGroupItem title="JS" active>
+
 ```js
 const { path } = require('@vuepress/utils')
 
@@ -37,6 +68,28 @@ module.exports = {
 }
 ```
 
+  </CodeGroupItem>
+
+  <CodeGroupItem title="TS">
+
+```ts
+import type { ThemeObject } from '@vuepress/core'
+import { path } from '@vuepress/utils'
+
+const localTheme: ThemeObject = {
+  name: 'vuepress-theme-local',
+  extends: '@vuepress/theme-default',
+  layouts: {
+    Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
+  },
+}
+
+export default localTheme
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
 你的本地主题将会继承默认主题，并且覆盖 `Layout` 布局。
 
 接下来，创建 `.vuepress/theme/layouts/Layout.vue` ，并使用由默认主题的 `Layout` 提供的插槽：