docs: add types for theme config (#3117)

* docs: add types for theme config * chore: missing {}
vuejs · Oct 21, 2023 · 71bed58 · 71bed58
1 parent 6cf1de5
commit 71bed58
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
@@ -98,6 +98,7 @@ export default {
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme'
 
+/** @type {import('vitepress').Theme} */
 export default {
   extends: DefaultTheme,
   enhanceApp(ctx) {
@@ -107,6 +108,23 @@ export default {
 }
 ```
 
+If you're using TypeScript:
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+export default {
+  // ...
+  async enhanceApp({ app }) {
+    if (!import.meta.env.SSR) {
+      const plugin = await import('plugin-that-access-window-on-import')
+      app.use(plugin)
+    }
+  }
+} satisfies Theme
+```
+
 Since we are using Vite, you can also leverage Vite's [glob import feature](https://vitejs.dev/guide/features.html#glob-import) to auto register a directory of components.
 
 ## Layout Slots

diff --git a/docs/guide/ssr-compat.md b/docs/guide/ssr-compat.md
@@ -52,6 +52,7 @@ Since [`Theme.enhanceApp`](./custom-theme#theme-interface) can be async, you can
 
 ```js
 // .vitepress/theme/index.js
+/** @type {import('vitepress').Theme} */
 export default {
   // ...
   async enhanceApp({ app }) {
@@ -63,6 +64,22 @@ export default {
 }
 ```
 
+If you're using TypeScript:
+```ts
+// .vitepress/theme/index.ts
+import type { Theme } from 'vitepress'
+
+export default {
+  // ...
+  async enhanceApp({ app }) {
+    if (!import.meta.env.SSR) {
+      const plugin = await import('plugin-that-access-window-on-import')
+      app.use(plugin)
+    }
+  }
+} satisfies Theme
+```
+
 ### `defineClientComponent`
 
 VitePress provides a convenience helper for importing Vue components that access browser APIs on import.