TS 支持

Mr.Hope ... Feature
大约 1 分钟

# TS 支持

vuepress-theme-hope 的大部分文件都是使用 Typescript 编写,所以 vuepress-theme-hope 也可以为你的 vuepress 项目带来了原生的 Typescript 支持,你只需设置 themeConfig.typescripttrue 即可开启 typescript 支持。

开启 Typescript 支持意味着你可以使用 enhanceAppFiles.ts,同时在你的 vue 组件 和 Markdown 文件中使用 Tyepscript。

如果你需要向 ts-loader 传递一些自定义选项,你也可以将 themeConfig.typescript 设置为一个 Object 来传递给 ts-loader。

提示

启用本主题后,你无需再依赖并启用 @vuepress/plugin-typescript

# 开启准备

如果你的项目没有依赖 typescript,你需要额外安装它:

npm i -D typescript
1

同时,你需要保证你的工作区包含有效的 tsconfig.json。 一个最简单的 tsconfig.json 如下:

{
  "compilerOptions": {
    "target": "ES6", // 任何不小于 es6 的 target 均可
    "allowSyntheticDefaultImports": true, // 规避 vuepress-types 的类型定义问题
    "experimentalDecorators": true, // Vue 的 Typescript 写法需要开启此选项
    "module": "commonjs", // 为了避免 vuepress-types 解析失败
    "types": ["@mr-hope/vuepress-theme-types"]
  },
  "include": [
    // 项目中需要至少包含一个 ts 文件 (空的文件也可),并正确配置在 include 中
    "src/.vuepress/enhanceApp.ts" // 请将 src 替换成你的文档目录
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

如果你已经有了 tsconfig.json, 那么只需要在 compilerOptions.types 中添加 vuepress-theme-hope 的类型定义文件包 "@mr-hope/vuepress-theme-types" 即可。

你还应该在你的项目中创建一个 ts 文件并添加至 tsconfig.jsoninclude 中,你可以直接创建一个空的 enhanceApp.ts 并将其引入。

注意

ts-loader 要求 tsconfig.json 至少命中一个有效的 ts 文件,所以最简单的办法就是创建或者转换 (如果你已经有了 enhanceAppFiles.js) 一个 enhanceAppFiles.ts 并将它添加至 include 选项中