TypeScript 错误排查

Mr.Hope ... 2021-3-16 大约 2 分钟

# 排查

请确保你的项目依赖了 typescript，如果没有，请执行

::::

确保项目根目录下有一个合法的 tsconfig.json 文件，，如果没有，请执行

::::

保证你的项目至少有一个 TypeScript 文件被其 include。

请在你的文档目录下创建 .vuepress/enhanceApp.ts，并将其相对路径添加到 tsconfig.json 中的 include 数组中。

# 错误列表

# error when parsing tsconfig.json

这个问题通常当你启用了 TypeScript 支持后， ts-loader 找不到 tsconfig.json 导致的。

你可以:

关闭 TypeScript 支持: 将 themeConfig.typescript 设置删除，或显式设置为 false 以禁用 vuepress-plugin-typescript。

在你的项目内创建一个合法的 tsconfig.json。

一个简单的 tsconfig.json 如下:

{
  "compilerOptions": {
    "target": "ES6", // 任何不低于 ES6 的 target 均可
    "allowSyntheticDefaultImports": true, // 规避 vuepress-types 的类型定义问题
    "experimentalDecorators": true, // Vue 的 TypeScript 写法需要开启此选项
    "module": "commonjs", // 为了避免 vuepress-types 解析失败
    // vuepress 与本主题的类型定义文件
    "types": ["@mr-hope/vuepress-theme-types"]
  },
  "include": [
    "src/.vuepress/enhanceApp.ts" // 请将 src 替换成你的文档目录
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 提示找不到相应 types

请确保将 "@mr-hope/vuepress-theme-types" 加入 compilerOptions.types 中，因为它不在 @types 目录下。

# No inputs were found in config file tsconfig.json

这个问题一般是你的项目中没有 TypeScript 文件 (或你的 tsconfig.json 配置有误) 导致的。

ts-loader 要求 tsconfig.json 的 include 和 exclude 配置项的结果至少包含项目内的一个 ts 文件。

如果你的项目没有 ts 文件，为了规避这个问题，你可以在你的项目的任意地方创建一个空的 ts 文件并把它添加至 tsconfig.json 的 include 中。

一个稍微好些的解决方案是通过在 .vuepress 目录下，建立一个空的 enhanceApp.ts 来解决这个问题，如果你已经有 enhanceApp.js，你可以直接将其转换为 TS。