TypeScript 导出未定义，尝试了所有改进技术

编程入门行业动态更新时间:2024-10-05 19:12:52

TypeScript 导出<a href=https://www.elefans.com/category/jswz/34/1771258.html style= 未定义，尝试了所有改进技术"/>

TypeScript 导出未定义，尝试了所有改进技术

我已经检查了所有 StackOverflow 上关于 typescript exports not being defined 的问题的答案，但没有一个能改善这个问题。

我正在关注 youtube 教程，视频中的人没有问题。

在

tsconfig.json

我已经将目标设置为ES6并注释掉了模块。然后我尝试将模块设置为 commonjs 这也没有用。

在

index.html

我已经将脚本类型设置为模块并且还尝试了这个技巧

<script>var exports = {"__esModule": true};</script>

但没有运气，如果我这样做我得到 require is not defined.

沙箱.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="">The Net Ninja</a>
</footer>

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

回答如下：

更多推荐

TypeScript 导出未定义,尝试了所有改进技术

本文发布于:2024-05-30 06:09:05，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1770192.html