哪些具有 Node.js API 的工具可用于创建 Gulp 任务来检查所有“.ts”、“.tsx”和“.vue”文件的 TypeScript 类型？

Question

我需要编写 Gulp 任务来检查“.ts”、“.tsx”和“.vue”文件的类型。 我知道如何编写 Gulp 插件，因此推荐带有小示例代码的特定库（即使没有 Gulp API）就足够了。

“为什么要使用 Gulp 来实现这个？Vite 或 Webpack 更适合这个！”

从现在开始，我假设你知道 Gulp 和 Webpack 之间的区别（否则，我的答案会变得太长）。

我的项目构建工具基于 Gulp，除了将 TypeScript 编译为 JavaScript 之外，还可以做各种事情。 而且，我正在使用 Webpack（与 Gulp 集成），但仅用于将 TypeScript 编译为 JavaScript。

好吧，这个主题是关于类型检查的。 之前我使用过 fork-ts-checker-webpack-plugin。 <=7.X版本面临的唯一问题是Webpack多编译器： 双重（或三重等）类型检查会对性能产生巨大影响。

从 8.x 版本开始，fork-ts-checker-webpack-plugin 放弃了对 Vue.js 的支持。 现在实现类型检查 Gulp 任务的动机就足够了（当然不是从头开始）。

要求

• Webpack 不涉及类型检查
  正如我上面所解释的，这个主题是关于可以由 Gulp 任务包装的东西。

• 需要 Node.js API 有些实用程序只有 CLI，但没有 Node.js API（例如，vue-script-type-check）。 此类实用程序不适合我的任务。

预期答案

就我个人而言，我不需要工作 Gulp 插件的完整示例（Gulp 插件的创建是完全独立的主题）。 像“您需要工具 XXX”这样的内容就足够了，示例如下：

import DesiredTool from "desired-tool";

// ...

const typeChekingResult: DesiredTool.LintingResult = await DesiredTool.
        checkFile("./Sample.ts");
        
if (typeChekingResult.isInvalid) {
  console.error(typeChekingResult.messages);
}

Answer 1

要在 Gulp 任务中对 TypeScript 和 Vue 文件执行类型检查，可以使用“fork-ts-checker”包，它提供 TypeScript 类型检查，无需集成 Webpack。此外，您可以使用“vue-type-check”包进行 Vue 文件类型检查。设置方法如下：

安装所需的软件包：

npm install fork-ts-checker-webpack-plugin vue-type-check --save-dev

创建一个 Gulp 任务来检查 TypeScript 和 Vue 文件：

const gulp = require('gulp');
const forkTsChecker = require('fork-ts-checker-webpack-plugin');
const { checkVueFiles } = require('vue-type-check');

function checkTypeScriptFiles() {
  return new Promise((resolve, reject) => {
    const tsChecker = new forkTsChecker({
      typescript: {
        configFile: 'tsconfig.json', // Specify your tsconfig.json path
      },
      async: false, // Ensure the task doesn't exit prematurely
    });

    tsChecker.run({}, (results, reporter) => {
      if (results.hasErrors() || results.hasWarnings()) {
        reject(new Error('TypeScript type checking failed.'));
      } else {
        resolve();
      }
    });
  });
}

function checkVueFilesTask() {
  return checkVueFiles('./src/**/*.vue', {
    tsconfig: 'tsconfig.json', // Specify your tsconfig.json path
    vue: {
      template: true, // Enable template type checking
      script: true,   // Enable script type checking
    },
  });
}

gulp.task('type-check', gulp.series(checkTypeScriptFiles, checkVueFilesTask));

在此示例中：

我们使用 fork-ts-checker-webpack-plugin 来执行 TypeScript 类型检查。 checkTypeScriptFiles 函数运行类型检查过程。确保指定 tsconfig.json 文件的路径。

我们使用 vue-type-check 来检查 Vue 文件是否存在类型错误。 checkVueFilesTask 函数运行 Vue 文件类型检查过程。根据需要调整路径和配置。

类型检查 Gulp 任务同时运行 TypeScript 和 Vue 文件类型检查。

现在，当您运行 gulp type-check 时，它将检查 TypeScript 和 Vue 文件是否存在类型错误。如果发现任何错误，任务将失败并显示错误消息。