0

我在将我的 Typescript 文件拆分为 2 个单独的 Typescript 文件(其中一个导入另一个)时遇到问题。

当文件没有分开时,我的网络应用程序运行得很好,但是当我分开它们时,我在我的主 Typescript 文件中得到一个初始化函数的 Uncaught ReferenceError 。

主要 Typescript 文件的开头如下:

import { Ticket } from "./Ticket";


// Constant Declarations
const arrCategory: string[] = ["Billing", "Marketing", "Developing"];
const arrPriority: string[] = ["Low", "Medium", "High"];
const arrStatus: string[] = ["Open", "Solved", "Closed"];


// Variable Declarations
// Form Inputs
let labelSearch: HTMLElement = (<HTMLElement>document.getElementById("search-label"));
let inputSearchList: HTMLInputElement = (<HTMLInputElement>document.getElementById("search-list"));
let inputIdentifier: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-identifier"));
let inputSubject: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-subject"));
let inputCategory: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-category"));
let inputAssignee: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-assignee"));
let inputPriority: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-priority"));
let inputStatus: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-status"));
let inputComments: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-comments"));
let buttonSubmit: HTMLInputElement = (<HTMLInputElement>document.getElementById("submit"));
let buttonReset: HTMLInputElement = (<HTMLInputElement>document.getElementById("reset"));
let message: HTMLElement = (<HTMLElement>document.getElementById("message"));

// Database of Ticket Objects
let arrTickets: Ticket[] = [];
let activeTicket: Ticket;   // The active ticket in the form (if editing/deleting)
let ticket1: Ticket;
let ticket2: Ticket;
let ticket3: Ticket;
let ticket4: Ticket;
let ticket5: Ticket;
let ticket6: Ticket;
let ticket7: Ticket;
let ticket8: Ticket;
let ticket9: Ticket;
let ticket10: Ticket;


/**
 * initialiseDatabase prepares a predefined set of 10 records in the database. 
 * Is called onload after the HTML is loaded and also calls the initialiseForm function.
 */
function initialiseDatabase(): void {
    
    // Initialise database with 10 records
    ticket1 = new Ticket("Rec001", "Submit Button Bug", arrCategory[2], "Matthew Martin", 
        arrPriority[2], arrStatus[1], "Submit button doesn't save ticket information.");
    arrTickets.push(ticket1);
    ticket2 = new Ticket("Rec002", "Payment Information Error", arrCategory[0], "Lisa Kim", 
        arrPriority[2], arrStatus[0], "Error whenever I try to enter my payment information.");
    arrTickets.push(ticket2);
    ticket3 = new Ticket("Rec003", "No Advertisements", arrCategory[1], "Fidel Badiola", 
        arrPriority[0], arrStatus[2], "Not receiving advertisements even though I am signed up.");
    arrTickets.push(ticket3);
    ticket4 = new Ticket("Rec004", "Output Message Timing", arrCategory[2], "Aaron Parry", 
        arrPriority[1], arrStatus[0], "Sometimes the output message disappears immediately.");
    arrTickets.push(ticket4);
    ticket5 = new Ticket("Rec005", "Save Card Information", arrCategory[0], "Anthony George", 
        arrPriority[0], arrStatus[0], "");
    arrTickets.push(ticket5);
    ticket6 = new Ticket("Rec006", "Edit Form", arrCategory[2], "Stephanie Lea", 
        arrPriority[0], arrStatus[2], "A reset button on the edit form would be especially useful.");
    arrTickets.push(ticket6);
    ticket7 = new Ticket("Rec007", "Spelling Mistake", arrCategory[1], "Tonia Martin", 
        arrPriority[0], arrStatus[0], "There is a spelling mistake on the edit page.");
    arrTickets.push(ticket7);
    ticket8 = new Ticket("Rec008", "Card Denied", arrCategory[0], "David Kim", 
        arrPriority[1], arrStatus[2], "Some bank cards are automatically denied.");
    arrTickets.push(ticket8);
    ticket9 = new Ticket("Rec009", "Save Card Function?", arrCategory[0], "Matthew Martin", 
        arrPriority[0], arrStatus[0], "");
    arrTickets.push(ticket9);
    ticket10 = new Ticket("Rec010", "Form Scaling", arrCategory[0], "Lisa Kim", 
        arrPriority[1], arrStatus[1], "The form doesn't scale properly at low window widths.");
    arrTickets.push(ticket10);

    // Prepare the form
    initialiseForm();

}

导入 Ticket 类代码相当简单,但我希望能够将它与主要的 Typescript 文件分开。

我的 HTML 代码如下:

    <head>
        <script data-main="src/TicketApp.js" src="src/require.js"></script>
    </head>
    <body>
    </body>
    <script>
        require(['domReady!', 'TicketApp'], function(domReady) {
            initialiseDatabase();
        });
    </script>

当我尝试加载 Web 应用程序时,我收到以下错误: 未捕获的ReferenceError:initialiseDatabase 未定义

我很困惑为什么我只在将 Ticket 类与主 Typescript 文件分开时才收到此错误。

我才刚刚开始学习 RequireJS,所以我的语法可能存在一些问题,除了只有 1 个 Typescript 文件时我没有收到任何错误,所以我很难找出问题所在。

4

0 回答 0