I have been having problems splitting my Typescript file into 2 separate Typescript files (with one imported into the other).
When the files aren't separated, my web app runs perfectly fine, but when I separate them, I get an Uncaught ReferenceError for an initialisation function in my main Typescript file.
The start of the main Typescript file is as follows:
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();
}
The import Ticket class code is fairly simple, but I'd like to be able to separate it from the main Typescript file.
My HTML code is as follows:
<head>
<script data-main="src/TicketApp.js" src="src/require.js"></script>
</head>
<body>
</body>
<script>
require(['domReady!', 'TicketApp'], function(domReady) {
initialiseDatabase();
});
</script>
When I try to load the web app, I get the following error: Uncaught ReferenceError: initialiseDatabase is not defined
I'm bewildered as to why I only get this error when I separate the Ticket class from the main Typescript file.
I've only just started learning RequireJS so there may be some problems with my syntax, except I get no errors when there is only 1 Typescript file, so I'm having a lot of trouble working out where the problem might be.