0

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.

  • Why re you mixing TypeScript (which uses ES modules) and RequireJS (which uses AMD modules) in the first place? I *think* they can be persuaded to work together, but I would just go down the standard TypeScript + Webpack route. – Quentin Dec 10 '21 at 10:15
  • Note that TicketApp doesn't export `initialiseDatabase` and your callback function only pays attention to the exports from domReady. – Quentin Dec 10 '21 at 10:16
  • Typescript + RequireJS was predefined for this course at university (so that was out of my control sadly). Sorry if this sounds stupid, but then why does the initialiseDatabase call work when the Typescript is combined into one file? I'm still not exporting it in that case either. – Matthew Martin Dec 10 '21 at 10:28
  • `initialiseDatabase` needs to be exported – Aluan Haddad Dec 12 '21 at 08:41

0 Answers0