vuepress-plugin-typescript

安装

npm install -D vuepress-plugin-typescript typescript

使用

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'vuepress-plugin-typescript',
      {
        tsLoaderOptions: {
          // ts-loader 的所有配置项
        },
      },
    ],
  ],
}

配置项

tsLoaderOptions

• 类型: Object
• 默认值: {}

ts-loader 的 Loader Options。参考 ts-loader 文档。

支持的特性

在 Markdown 中使用 TS

我们知道， VuePress 允许我们 在 Markdown 中使用 Vue。

这个插件可以允许你在 Markdown 中通过 TypeScript 使用 Vue 。

输入

{{ msg }}
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data: () => ({
    msg: 'Hello, TypeScript in Markdown!',
  }),
})
</script>

输出

Hello, TypeScript in Markdown!

在 Vue SFC 中使用 TS

这个插件允许你使用 TypeScript 来写 .vue 文件，包括：

• 自动注册的全局组件: .vuepress/components/*.vue
• 主题布局组件: theme/layouts/*.vue
• 其他你想要在 VuePress 中使用的组件

参考当前文档的 源代码。

enhanceApp.ts

VuePress 支持 应用级别的配置，即 .vuepress/enhanceApp.js / theme/enhanceApp.js.

这个插件允许你使用 enhanceApp.ts 来代替 enhanceApp.js 。

参考这个插件的 测试用例。

注意

如果你想在 enhanceApp.ts 或其他 .ts 文件中引入 .vue 文件，记得创建 .vuepress/shims-vue.d.ts:

// .vuepress/shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

类型定义

你可能会遇到 VuePress 的类型检查问题，比如无法找到 this.$themeConfig 的类型定义。

如果你想获取到正确的类型定义，你可以尝试使用 vuepress-types 。