TS Support for VuePress Plugin and Theme.

Motivation

We've announced VuePress 1.9 that takes full TypeScript Support for Config File, while VuePress 1.9.2 ships with TS Support for VuePress Plugin and Theme:

Quick Start

In order to make the plugin developer not dependent on VuePress for development, we provide a completely independent type package @vuepress/types:

npm i @vuepress/types -D

@vuepress/types exports four functions:

• defineConfig
• defineConfig4CustomTheme
• defineTheme
• definePlugin

Note that using @vuepress/types is equivalent to using vuepress/config.

Plugin Type

If you already have some VuePress plugins written in JS, you can leverage your IDE's intellisense with jsdoc type hints:

/**
 * @type {import('@vuepress/types').Plugin}
 */
module.exports = {
  ready() {
    // ...
  }
};

Alternatively, you can use the defineConfig helper which should provide intellisense without the need for jsdoc annotations:

import { definePlugin } from "@vuepress/types";

export default definePlugin({
  // ...
});

Plugin Options Type

Type of plugin options also supports passing in through generic type:

import { definePlugin } from "@vuepress/types";

interface Options {
  name: string;
}

export default definePlugin<Options>((options, ctx) => {
  return {
    ready() {
      return ctx.base + options.name;
    }
  };
});

Theme Type

Similar to plugin, the only difference is the type you use, and the define function:

 /**
- * @type {import('@vuepress/types').Plugin}
+ * @type {import('@vuepress/types').Theme}
  */

-import { definePlugin } from "@vuepress/types";
+import { defineTheme } from "@vuepress/types";

-export default definePlugin({
+export default defineTheme({
   // ...
 });

Theme Config Type

Type of theme config also supports passing in through generic type:

import { defineTheme } from "@vuepress/types";

interface ThemeConfig {
  lang: string;
}

export default defineTheme<ThemeConfig>((themeConfig, ctx) => {
  return {
    ready() {
      return ctx.base + themeConfig.lang;
    }
  };
});

Notes

It is worth noting that, unlike the site configuration, i.e. .vuepress/config.js, if you use TypeScript to write theme or plugin, you still need to compile it into JavaScript before publishing it to NPM.