如何在 .ts 文件中不将文件类型指定为 .js？答案

【问题标题】：How to not specify file type as .js in a .ts file?如何在 .ts 文件中不将文件类型指定为 .js？
【发布时间】：2021-05-13 19:28:11
【问题描述】：

我的目标是按原样导入 .ts 文件，而不是将文件类型指定为 .js，例如 import {acccessRights} from "utils/accessRights"。

我的预期结果：我可以在不指定文件类型的情况下从其他文件导入方法。

我的实际结果：它抛出错误GET http://127.0.0.1:5501/build/lights/switchLights net::ERR_ABORTED 404 (Not Found)。

临时解决方案：将文件类型指定为 .js 例如import { switchLights } from "lights/switchLights.js"。但是，这个玩笑会因为找不到.js 文件而中断。

index.html 的一部分

<body>
  <script type="module" src="app.js"></script>
</body>

app.ts 的一部分

import { User } from "./utils/accessRights";
import { switchLights } from "./lights/switchLights";

utils/accessRights.ts

export interface User {
  role: string;
}

export function userIsAdmin(user: User): boolean {
  return user.role === "admin";
}

灯/switchLights.ts

import {User, userIsAdmin} from "../utils/accessRights";

let lightsCondition: boolean = false;

function switchLightsRender() {
  document.getElementById("lightsCondition").innerHTML = lightsCondition ? "ON" : "OFF";;
  document.getElementById("lightsButton").innerHTML = `Lights ${!lightsCondition ? "ON" : "OFF"}`;
}

export function switchLights(user: User) {
  if (!userIsAdmin(user)) return false;
  lightsCondition = !lightsCondition;
  switchLightsRender();
  return true;
}

这些是用于单元测试的笑话文件。

test/utils/accessRights.test.ts

import {userIsAdmin, User} from "../../src/utils/accessRights";

export let userTest: User = { role: "admin" }

test('user is admin', () => {
  expect(userIsAdmin(userTest)).toBe(true);
})

test/lights/switchLights.ts

import {userTest} from "../utils/accessRights.test";
import {switchLights} from "../../src/lights/switchLights";

test("lights switched ON/OFF", () => {
  let lightsConditionRef = document.createElement("span");
  lightsConditionRef.setAttribute("id","lightsCondition");
  document.body.appendChild(lightsConditionRef);

  let lightsButtonRef = document.createElement("button")
  lightsButtonRef.setAttribute("id","lightsButton");
  document.body.appendChild(lightsButtonRef);
  
  expect(switchLights(userTest)).toBe(true);
})

这是将 .ts 文件转换为 .js 文件的一种

问题是自动生成的代码没有在导入中指定文件类型

我的预期结果：

import { userIsAdmin } from "../utils/accessRights.js";

我的实际结果：

import { userIsAdmin } from "../utils/accessRights";

这是自动生成的文件。

build/lights/switchLight.js

import { userIsAdmin } from "../utils/accessRights";
var lightsCondition = false;
function switchLightsRender() {
    var lightsConditionRef = document.getElementById("lightsCondition");
    if (lightsConditionRef !== null)
        lightsConditionRef.innerHTML = lightsCondition ? "ON" : "OFF";
    ;
    var lightsButtonRef = document.getElementById("lightsButton");
    if (lightsButtonRef !== null)
        lightsButtonRef.innerHTML = "Lights " + (!lightsCondition ? "ON" : "OFF");
}
export function switchLights(user) {
    if (!userIsAdmin(user))
        return false;
    lightsCondition = !lightsCondition;
    switchLightsRender();
    return true;
}

【问题讨论】：

您是否使用转译器/编译器将 typescript 转换为 JS？
@evolutionxbox 是的。我在tsconfig.json中使用"module": "es2015"
对不起，我的意思是你使用像 parcel、webpack 之类的工具吗？我问的原因是因为您不能将打字稿模块导入本机 JS 模块（本机意思未转译）并期望它能够工作
"但是，这个笑话会中断，因为它没有找到 .js 文件。"能否请您包含此文件以及问题中引发的错误？
@evolutionxbox 不，我使用 VS Code 中的 Live Server 扩展来运行 index.html，我还运行 tsc --watch 来自动转译它。

标签： javascript typescript

【解决方案1】：

这是你的问题：How to make TypeScript output valid ES6 module import statements?

解决方案：

使用捆绑器。我建议现在使用parcel，主要是因为它不需要任何设置。

如果你需要配置很多东西并且有边缘情况，我建议使用webpack。

安装包裹

npm i -D parcel
实际上将您的 HTML 文件格式 app.js 中的导入更改为 app.ts（或任何您的文件名称）。
添加一个 npm 脚本进行开发：

"scripts": {
  "serve": "parcel index.html"
},

运行npm run serve

这将为您托管一个服务器（终端中的 URL）并在您更改任何内容时重新编译。

Parcel Documentation(Getting Started)

【讨论】：

使用tsc typescript 编译器怎么样？这就是 OP 已经在使用的东西
@evolutionxbox 你看过我放在答案顶部的链接吗？据我了解，这是不可能的。
@Elias 我也使用parcel 和tsc。有用。我不知道为什么。我还是在脚本标签<script src="build/app.js"></script>中使用.js，使用tsc --watch编译。
@kidfrom 你不必使用tsc --watch 来编译。 parcel 会为你做到这一点
@Elias 我是不是用错了方法？正如你所说的那样，这是不可能的。