Typescript-import saknar .js-tillägget när det kompileras till JavaScript

Jag har beslutat att migrera mitt js-projekt till ts, men jag stöter på följande problem: alla imports i ts-filer saknar .js-tillägget i de kompilerade js-filerna. Detta i sin tur orsakar följande fel: Loading failed for the module with source “http://localhost:5500/build/test/first ”. i min webbläsares konsol. Här är innehållet i /src/index.html-filen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="/build/test/last.js" type="module"></script>
</html>

/src/test/first.ts

export class First {
    name: string;

    constructor(name: string) {
        this.name = name
    }
}

/src/test/last.ts

import {First} from "./first"
class Last {

    constructor() {
        let name = new First("this is my name").name;
        console.log(name)
    }
}

new Last();

/build/test/first.js

export class First {
    constructor(name) {
        this.name = name;
    }
}

/build/test/last.js

import { First } from "./first";
class Last {
    constructor() {
        let name = new First("this is my name").name;
        console.log(name);
    }
}

Notera att i last.js saknas importen en .js-tillägg och om jag manuellt lägger till det saknade tillägget fungerar allt som förväntat. Och slutligen här är min ts-konfiguration

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["DOM","ES2017", "DOM.Iterable", "ScriptHost"],
        "watch": true,
        "rootDir": "./src", 
        "outDir": "./build",
        "sourceMap": true,
        "removeComments": true,
        "noEmitOnError": true,
        "strict": true,
    }
}

Finns det något jag missar som gör att rätt tillägg inte läggs till i importerna? Om så är fallet, vänligen berätta för mig vad jag gör fel. Tack.

Svar #1

Finns det något jag missar som inte lägger till rätt tillägg på importerna?

Varför skulle TypeScript slumpmässigt ändra dina importer? Du sa åt det att importera en modul som heter ./first och det kompilerade korrekt det till en import för en modul som heter ./first.

Om du vill importera en annan modul behöver du tala om för TypeScript att importera en annan modul.

Så, om du inte vill importera ett modul som heter ./first utan istället vill importera ett modul som heter ./first.js, behöver du tala om för TypeScript att importera ett modul som heter ./first.js, inte ett modul som heter ./first:

import {First} from "./first.js"

Relaterade artiklar