I am working on importing .ts files as they are without specifying the file type as .js, for example:
import {acccessRights} from "utils/accessRights"My desired outcome is to be able to import a method from another file without having to specify the file type.
However, when I try to do this, I encounter an error message:
GET http://127.0.0.1:5501/build/lights/switchLights net::ERR_ABORTED 404 (Not Found)As a temporary solution, I have resorted to specifying the file type as .js like this:
import { switchLights } from "lights/switchLights.js".js file.
This snippet shows part of the index.html file:
<body>
<script type="module" src="app.js"></script>
</body>
And here is part of the app.ts file:
import { User } from "./utils/accessRights";
import { switchLights } from "./lights/switchLights";
In the utils/accessRights.ts file, we define the interface and function like so:
export interface User {
role: string;
}
export function userIsAdmin(user: User): boolean {
return user.role === "admin";
}
The lights/switchLights.ts file contains the following code:
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;
}
Here are the Jest test files for reference:
The test/utils/accessRights.test.ts file:
import {userIsAdmin, User} from "../../src/utils/accessRights";
export let userTest: User = { role: "admin" }
test('user is admin', () => {
expect(userIsAdmin(userTest)).toBe(true);
})
And the test/lights/switchLights.ts file:
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);
})
Next, here is one of the transpiled .ts files to a .js file with an issue in the import statement:
Expected result:
import { userIsAdmin } from "../utils/accessRights.js";
Actual result:
import { userIsAdmin } from "../utils/accessRights";
This is the auto-generated build/lights/switchLight.js file:
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;
}