typescript - 运行 Mocha 测试时混合使用 typescript 和 javascript 模块

Question

tldr;我想一次将我的 JS 项目转换为 TS 一个文件，同时能够在没有构建步骤的情况下运行 Mocha 测试。

我在当前的 javascript 代码中使用了很多 Babel 转换(类 props、jsx、...)，Mocha 在运行时通过注册 babel 加载器(基本上是 mocha --require @babel/register )来处理这些转换。这意味着运行单个测试速度很快，并且不需要整个项目的构建步骤。

我关注了a guide on getting started with TypeScript using the (relatively) new babel plugin from Microsoft : @babel/preset-typescript .这适用于基本情况:将 app.js 转换为 app.ts。

它没有涵盖的是如何进行逐步过渡。对我来说，修复 3978 个 typescript 错误(执行 <code>find</code> ... 后的实际计数)有点压倒性，并且会使开发停滞两周。只是让我的 200 个 LOC 助手库与 react-redux 中的定义很好地编译花了一个多小时。

一边做git mv app.{j,t}s工作得很好，对任何其他文件都这样做是一场灾难。即使在注册 Babel 并添加合适的扩展名时，现有的 Mocha 测试也会因为找不到正确的文件而迅速崩溃:
mocha --extension js,jsx,ts,tsx --require @babel/register
通常如果做 git mv Logger.{j,t}s我会得到 Error: Cannot find module './lib/logging/Logger' .

有没有办法让 Mocha 的模块加载器识别 typescript 文件并通过 Babel 透明地运行它们？

Answer 1

以下是我如何在我们的混合 javascript/typescript frankenstein 代码库中使用它。 mocha 只是在执行我们的测试之前编译代码。这使得它在一个步骤中完成，而不是两个单独的步骤。这是我下面的配置。您可以将 mocha opts 替换为仅将这些添加为 cli 标志。

// .mocharc.js
module.exports = {
    diff: true,
    extension: ['ts', 'tsx', 'js'], // include extensions
    opts: './mocha.opts', // point to you mocha options file. the rest is whatever.
    package: './package.json',
    reporter: 'spec',
    slow: 75,
    timeout: 2000,
    ui: 'bdd'
};

// mocha.opts
--require ts-node/register/transpile-only // This will transpile your code first without type checking it. We have type checking as a separate step.
// ...rest of your options.

// package.json
{
  "scripts": {
    "test": "mocha"
  }
}

更新:包括转换后的 react 项目的相关 tsconfig 选项:

{
    "compilerOptions": {
        "noEmit": true, // This is set to true because we are only using tsc as a typechecker - not as a compiler.
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["dom", "es2015", "es2017"],
        "jsx": "react", // uses typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allows a partial TypeScript and JavaScript codebase
        "checkJs": true, // checks types in .js files (https://github.com/microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files)
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
    },
    "include": [
        "./src/**/*.ts",
        "./src/**/*.tsx",
        "./src/pages/editor/variations/**/*" // type-checks all js files as well not just .ts extension
    ]
}