为什么我必须将 TS 文件导入为 JS 文件？

Question

我正在使用 WebdriverIO 帮助进行一个测试项目。我们在 TS serting 方面遇到了巨大的困难，因为 TS 转译器似乎可以正确解析 TS 模块，但解析在运行时失败。

例如，如果我有一个模块：

// config/config.ts
export const config = {};

然后是一个文件：

// someTest.ts
import { config } from './config/config`;

然后 TS 将正确显示 的类型config。但是，在运行该套件时，我会收到以下消息：

[0-2] 2023-04-18T09:07:54.651Z ERROR @wdio/runner: Error: Cannot find module '/Users/ronnyefronny/projects/wdio-demo/config/config' imported from /Users/ronnyefronny/projects/wdio-demo/test/step-definitions/VoiceflowStepDefs.ts

我的tsconfig.json是：

// config/config.ts
export const config = {};

WDIO 配置的其余部分是按照他们的文档推荐的，但仍然什么也没有。

让我困惑的是，在他们自己的示例样板存储库中，WDIO 将 TS 模块导入为 JS，这让我困惑不已。我在后端和前端项目上使用 TS 已经有几年了，从来不需要导入 TS 模块作为其转译的 JS 模块。

也就是说，而不是

import { config } from './config/config';

会做

import { config } from './config/config.js';

我很想了解为什么会发生这种情况，更具体地说，为什么在这种情况下我不能使用常规 TS 导入。有什么不同？

Answer 1

allowImportingTsExtensions我通过添加解决了这个问题tsconfig.json。

tsconfig.json现在

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esnext",
    "types": [
      "node",
      "@wdio/globals/types",
      "wdio-intercept-service",
      "@wdio/mocha-framework"
    ],
    "target": "es2022",
    "lib": ["esnext"],
    "allowImportingTsExtensions": true,  <---- This ignored the error
    "noEmit": true                       <---- Since "allowImportingTsExtensions" can only work along with "noEmit" I had to add this too
  },
  "include": ["e2e/**/*.ts"],
  "exclude": ["node_modules"]
}

ps 太漂亮了，VS Code 给出了提示，但我没有完全阅读它。

聚苯硫醚

顺便说一句，VS code 建议仅在将 VS Code 编译器版本设置为 v5.0.4 时添加。allowImportingTsExtensions最初我选择了 v4.8.4，但它没有建议我。这是因为这个选项是在 TS v5.0 中引入的