javascript - Den forespurte modulen tilbyr ikke en eksport med navnet

Jeg oversetter dette JavaScript-prosjektet (https://github.com/Legorin/satisfactory-calculator) til TypeScript.

Jeg får en feil når jeg importerer den transpilerte TypeScript-filen i en HTML-skript-tag.

<script>
  var handlers = {}
</script>
<script type="module">
  import { Initilatizion } from "./init.js";
  handlers.init = Initilatizion.init;
</script>

Feilen er: Uncaught SyntaxError: Den forespurte modulen './init.js' gir ikke en eksport med navnet 'Initilatizion'

Her er min init.ts-fil

import { Belt } from "./belt";
import { Building } from "./building";
import { FactorySpecification } from "./factorySpecification";
import { Fragment } from "./fragment";
import { Item } from "./item";
import { Recipe } from "./recipe";
import { Settings } from "./settings";
// tslint:disable-next-line: no-var-requires
const d3 = require("../third_party/d3.min.js");

export class Initilatizion {
    public static loadData(settings) {
        const spec: FactorySpecification = FactorySpecification.getInstance();
        d3.json("data/data.json").then((data) => {
            const items = Item.getItems(data);
            const recipes = Recipe.getRecipes(data, items);
            const buildings = Building.getBuildings(data);
            const belts = Belt.getBelts(data);
            spec.setData(items, recipes, buildings, belts);

            Settings.renderSettings(settings);

            spec.updateSolution();
        });
    }

    public static init() {
        const settings = Fragment.loadSettings(window.location.hash);
        this.loadData(settings);
    }
}

Her er min tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "sourceRoot": "src",
  },
}

Hvor er min feil?

Svar #1

Du erklærte feil module-type i din tsconfig.json!

Ved å sette module til "commonjs" forteller du TypeScript å generere en JavaScript-fil som bruker CommonJS import/eksport-syntaksen som brukes av Node.js og andre. Du derimot bruker den "nye" ES6-modul import/eksport-syntaksen i din HTML og må derfor sette module til "esnext" eller "es6"!

Relatert dokumentasjon

Merk: Du delte en ugyldig tsconfig.json-fil, jeg har fikset den nedenfor

Eksempel tsconfig.json:

{
  "compilerOptions": {
    "module": "es6",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "sourceRoot": "src"
  },
}

Relaterte artikler