We are almost there! The last thing that we need to do is to instantiate our different classes.
Add the following code at the end of mediaman.ts.
First, create an instance of the view:
const view: HTMLMediaManView = new HTMLMediaManView();
Then instantiate the services:
const bookService = new MediaServiceImpl<Book>(Book);
console.log("Book service initialized: ", bookService);
const movieService = new MediaServiceImpl<Movie>(Movie);
console.log("Movie service initialized: ", movieService);
Now we can finally instantiate our controller and provided it with the view and service instances:
const mediaManController = new MediaManControllerImpl(view, bookService, movieService);
Finally, because of the way our code is bundled and loaded in the browser using Parcel.js (https://parceljs.org), we need to add a global variable on the Window object. Without this, our event handlers will not be able to access the mediaManController object at runtime:
interface CustomWindow extends Window {
mediaManController?: MediaManController
}
const customWindow: CustomWindow = window;
customWindow.mediaManController = mediaManController;
console.log("MediaMan ready!", customWindow.mediaManController);
Take note of how we have added the global variable. Since Window is a type included in the standard TypeScript library, you cannot change it easily. This is why we're creating a CustomWindow interface, extending from the one provided by TypeScript. In this way, we can properly declare our property. Once done, we assign the window object to a constant using our CustomWindow type, which allows us to bind the mediaManController property to it.
You can learn more about this trick here: https://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript.
At this point, you should have a fully functional web application! Go ahead and create some collections/books, then hit the refresh button, and see that your data was not lost thanks to IndexedDB!