diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d7158ee..ef08852 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,12 +1,21 @@
-const demoCode = require('../../src/')
+const { defineConfig } = require('vuepress/config')
+
+const demoCode = require('../../src')
 const { name, description } = require('../../package.json')
 
-const ecosystemItems = [
-    { text: '📖markdown-it-vuese', link: 'https://buptsteve.github.io/markdown-it-vuese/' },
-]
+/**
+ * @type {import('../../src/').DemoCodePluginOptions}
+ */
+const demoCodeOptions = {
+    cssLibs: [
+        'https://unpkg.com/animate.css@3.7.0/animate.min.css',
+    ],
+    showText: 'show more',
+    hideText: 'hide',
+}
 
-module.exports = {
-    base: '/' + name + '/',
+module.exports = defineConfig({
+    base: `/${name}/`,
     locales: {
         '/': { lang: 'en-US', title: 'demo-code', description },
         '/zh/': {
@@ -21,13 +30,8 @@ module.exports = {
     ],
     plugins: [
         ['smooth-scroll'],
-        [demoCode, {
-            cssLibs: [
-                'https://unpkg.com/animate.css@3.7.0/animate.min.css',
-            ],
-            showText: 'show more',
-            hideText: 'hide',
-        }],
+        // @ts-ignore
+        [demoCode, demoCodeOptions],
     ],
     markdown: {
         extendMarkdown: (md) => {
@@ -45,27 +49,20 @@ module.exports = {
         docsDir: 'docs',
         sidebarDepth: 2,
         editLinks: true,
-        serviceWorker: {
-            updatePopup: {
-                message: 'New content is available.',
-                buttonText: 'Refresh',
-            },
-        },
         locales: {
             '/': {
                 selectText: '🌍Languages',
                 label: 'English',
                 editLinkText: 'Edit this page on GitHub',
-                serviceWorker: {
-                    updatePopup: {
-                        message: 'New content is available.',
-                        buttonText: 'Refresh',
-                    },
-                },
                 nav: [
                     { text: '🌱Guide', link: '/' },
                     { text: '😎Example', link: '/example/' },
-                    { text: '🔥Ecosystem', items: ecosystemItems },
+                    {
+                        text: '🔥Ecosystem',
+                        items: [
+                            { text: '📖markdown-it-vuese', link: 'https://buptsteve.github.io/markdown-it-vuese/' },
+                        ],
+                    },
                 ],
                 sidebar: {
                     '/example/': [{
@@ -80,16 +77,15 @@ module.exports = {
                 selectText: '🌍选择语言',
                 label: '简体中文',
                 editLinkText: '在 GitHub 上编辑此页',
-                serviceWorker: {
-                    updatePopup: {
-                        message: '文档有更新。',
-                        buttonText: '刷新',
-                    },
-                },
                 nav: [
                     { text: '🌱指南', link: '/zh/' },
                     { text: '😎示例', link: '/zh/example/' },
-                    { text: '🔥生态系统', items: ecosystemItems },
+                    {
+                        text: '🔥生态系统',
+                        items: [
+                            { text: '📖markdown-it-vuese', link: 'https://buptsteve.github.io/markdown-it-vuese/' },
+                        ],
+                    },
                 ],
                 sidebar: {
                     '/zh/example/': [{
@@ -102,4 +98,4 @@ module.exports = {
             },
         },
     },
-}
+});
diff --git a/package.json b/package.json
index 56789e8..5714c95 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
     "name": "vuepress-plugin-demo-code",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "description": "📝 Demo and code plugin for vuepress",
     "main": "src/index.js",
+    "types": "src/index.d.ts",
     "files": [
         "src"
     ],
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 0000000..698b1c3
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1,45 @@
+export interface DemoCodePluginOptions {
+    /** Js libraries for the demo. */
+    jsLibs?: string[],
+    /** Css libraries for the demo. */
+    cssLibs?: string[],
+    /**
+     * The semantic version string of vue. For more information on semantic versioning syntax, see the [npm semver calculator](https://semver.npmjs.com/).
+     */
+    vueVersion?: string,
+    /** The display text of unfold code button. */
+    showText?: string,
+    /** The display text of fold code button. */
+    hideText?: string,
+    /** The height of the code when it is folded. */
+    minHeight?: number,
+    /** Display online edit buttons. */
+    onlineBtns?: {
+        codepen?: boolean,
+        jsfiddle?: boolean,
+        codesandbox?: boolean,
+    },
+    /**
+     * It passes [jsfiddle options](https://docs.jsfiddle.net/api/display-a-fiddle-from-post).
+     */
+    jsfiddle?: Record<string, string>,
+    /**
+     * It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api).
+     * > `deps` is dependencies
+     */
+    codesandbox?: {
+        deps?: Record<string, string>
+        json?: string,
+        query?: string,
+        embed?: string,
+    },
+    /** The mark of the plugin, follows the tag after `:::`. */
+    demoCodeMark?: string,
+    /**
+     * It passes [vuepress-plugin-code-copy](https://github.com/znicholasbrown/vuepress-plugin-code-copy#options)'s options, or `false` to disable it.
+     */
+    copyOptions?: false | {
+        align?: string,
+        selector?: string,
+    },
+}