TypeScript Support for Config File

Overview

VuePress 1.9 introduced full TypeScript Support for Config File, for VuePress 1.x, this is a late key feature:

Features

Support .vuepress/config.ts

Previously, VuePress only supported these configurations

• .vuepress/config.js
• .vuepress/config.yml
• .vuepress/config.toml

From now on, .vuepress/config.ts get officially supported.

defineConfig helper for config intellisense

A helper function exposed at vuepress/config, which helps you to have type prompt:

import { defineConfig } from "vuepress/config";

export default defineConfig({
  title: "VuePress",
  description: "Vue-powered Static Site Generator"
  // ...
});

Type Inferences for Theme

By default, defineConfig helper leverages type of Default Theme Config as themeConfig, i.e, type hints for all Default Theme Config is available for now.

import { defineConfig } from "vuepress/config";

export default defineConfig({
  themeConfig: {
    repo: "vuejs/vuepress",
    editLinks: true,
    docsDir: "packages/docs/docs"
    // Type is `DefaultThemeConfig`
  }
});

If you use a custom theme, you can use the defineConfig4CustomTheme helper with ability to pass generic type for your theme:

import { defineConfig4CustomTheme } from "vuepress/config";

interface MyThemeConfig {
  hello: string;
}

export default defineConfig4CustomTheme<MyThemeConfig>({
  themeConfig: {
    // Type is `MyThemeConfig`
    hello: "vuepress"
  }
});

Type Inferences for Official Plugins

From now, you’ll be able to enjoy the type prompt of the official plugins:

Options of the official plugins certainly have type prompts, Both Tuple Style, Object Style, and Plugin Shorthand support type inference:

• Tuple Style:

import { defineConfig } from "vuepress/config";

export default defineConfig({
  plugins: [
    [
      "@vuepress/pwa",
      {
        serviceWorker: true
      }
    ]
  ]
});

• Object Style:

import { defineConfig } from "vuepress/config";

export default defineConfig({
  plugins: {
    "@vuepress/pwa": {
      serviceWorker: true
    }
  }
});

The illustration snapshot is omitted here, you can try it yourself.

ISO Language Code

Type inference supports ISO Language Code

Context API

VuePress’s configuration can also be a function, while its first parameter is the current app context:

import { defineConfig } from "vuepress/config";

export default defineConfig(ctx => ({
  // do not execute babel compilation under development
  evergreen: ctx.isProd
}));

Limitations

It is worth noting that third-party plugins do not support Plugin Shorthand if you’re using Tuple Style to write your config, this is because from the perspective of the type system, the unknown shortcut is equivalent to string, which results in the failure of type inference.

By default, only officially maintained and plugins under VuePress Community support shortcut, feel free to submit pull request to add your plugin at this file.

Credits

• bundle-require (by @egoist): we leverage it under the hood to resolve user's config, which is powered by esbuild.
• vscode-ts-in-markdown (by @Amour1688): this documentation is powered by this plugin, which makes type checking possible in markdown.