Refactoring a Single Page web app in TypeScript

Question

I have a small SPA web app that uses Javascript along with JQuery to load and display data dynamically in various containers that are activated depending on the user's interactions (it's an app for warehouse activities, such as managing picking lists an order preparations).

Typically, the startup code looks like this:

$(document).ready(function () {

    $("#menuDeliveryPreparations").click(function (e) {
       // Make some stuff visible when the user clicks this ...
    });

    $("#menuOrdersByArticles").click(function (e) {
       // Load some data ...
    });

    // Lots more event wiring...
});

Now, I see the benefits of moving all this to TypeScript so I can separate the various functionalities into modules and classes, have static typing, contained scrope and accurate Intellisense and all that.

The problem though is that once I start, I have no real idea how to refactor my existing code.
I can move related bits of functionality into separate modules and classes, but most of these are not really business objects, they are more UI-related code, and I still need to wire up all these event at some point.

So my questions are:

Should I encapsulate everything in classes? But then, how do I instantiate each class and wire up the UI? Should I use a Winform-like paradigm where I wire up the the event within the class' constructor?
JavaScript and its top-down execution model has a more natural functional feel that I struggle to translate into a class (object) oriented one (which TypeScript tends to promote). Am I completely out of it and is it a noob mistake to organise code like this anyway and that's why I'm struggling?

Refactoring a Single Page web app in TypeScript

1 Answers