TypeScript exports未定义问题求助：已尝试多种方案仍无效

我已经查遍了StackOverflow上所有关于TypeScript exports未定义的解决方案，但都没能解决我的问题。我正在跟着YouTube教程学习，但视频里的演示完全没出现这个问题。

在tsconfig.json里，我已经把target设为ES6，试过注释module配置，也尝试过把module设为commonjs和ES6，全都没用。在index.html里，我给script标签加了type="module"，还试过添加<script>var exports = {"__esModule": true};</script>的方案，但又出现了require未定义的新问题。

以下是相关代码文件：

sandbox.ts #

import { Invoice } from './classes/Invoice';

const form = document.querySelector('.new-item-form') as HTMLFormElement; 

//inputs
const type = document.querySelector('#type') as HTMLSelectElement;
const tofrom = document.querySelector('#tofrom') as HTMLInputElement;
const details  = document.querySelector('#details') as HTMLSelectElement;
const amount  = document.querySelector('#amount') as HTMLSelectElement;

form.addEventListener('submit', (e:Event) => {
    e.preventDefault();
    console.log(
        type.value,
        tofrom.value,
        details.value,
        amount.value
    );
});


//instantiate class
const invOne = new Invoice('test', 'work on test', 250);

console.log (invOne);

let invoice:Invoice[] = []; //only accepts invoice objects in the array
invoice.push(invOne);

interface isPerson{
    name:string;
    age:number;
    speak(a: string):void; //takes a string parameter and returns void
    spend(a:number):number;
}

const me:isPerson = {
    name:"PersonName",
    age:30,
    speak(text:string):void{
        console.log(text);
    },
    spend(amount: number): number {
        console.log('I spent', amount);
        return amount;
    }

    //Adding more properties won't work because they are not inside the interface
}

console.log(me);

Invoice.ts #

export class Invoice{
    readonly client:string;
    private details:string;
    public amount:number;

    constructor(c:string,d:string,a:number) {
        this.client = c;
        this.details = d;
        this.amount = a;
    }

    //Method
    format(){
        return `${this.client} owes £${this.amount} for ${this.details}`;
    }
}

index.html #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">
    <h1>Finance Logger</h1>

    <!-- output list -->
    <ul class="item-list">

    </ul>
</div>

<footer>
    <form class="new-item-form">
        <div class="field">
            <label>Type:</label>
            <select id="type">
                <option value="invoice">Invoice</option>
                <option value="payment">Payment</option>
            </select>
        </div>
        <div class="field">
            <label>To / From:</label>
            <input type="text" id="tofrom">
        </div>
        <div class="field">
            <label>Details:</label>
            <input type="text" id="details">
        </div>
        <div class="field">
            <label>Amount (£):</label>
            <input type="number" id="amount">
        </div>
        <button>Add</button>
    </form>

    <a href="https://www.thenetninja.co.uk">The Net Ninja</a>
</footer>

<!-- <script>var exports = {"__esModule": true};</script> -->
<script type="module" src='sandbox.js'></script>
</body>
</html>

编译后的sandbox.js #

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Invoice_1 = require("./classes/Invoice");

var form = document.querySelector('.new-item-form');

var type = document.querySelector('#type');
var tofrom = document.querySelector('#tofrom');
var details = document.querySelector('#details');
var amount = document.querySelector('#amount');
form.addEventListener('submit', function (e) {
    e.preventDefault();
    console.log(type.value, tofrom.value, details.value, amount.value);
});

var invOne = new Invoice_1.Invoice('test', 'work on test', 250);
console.log(invOne);
var invoice = []; //only accepts invoice objects in the array
invoice.push(invOne);
var me = {
    name: "PersonName",
    age: 30,
    speak: function (text) {
        console.log(text);
    },
    spend: function (amount) {
        console.log('I spent', amount);
        return amount;
    }
    //Adding more properties won't work because they are not inside the interface
};
console.log(me);

内容的提问来源于stack exchange，提问作者CodingCat