Let's boost JavaScript with TypeScript

I love TypeScript. If you have no idea about it then you can do a quick google search but for a basic introduction I can say, it's a language like JavaScript which extends JavaScript and gives us a power to use types for easier development. But is it okay? Not really!

You know, JavaScript sometimes can turn pretty ugly. And when it turns ugly finding errors and fixing them also turns into a nightmare. Where TypeScript can help us to overcome this problem. In this article, I'll demonstrate a glimpse of TypeScript by creating a simple TypeScript application from scratch.

ButtonApp

This application will render buttons as per config is provided and add a click event with each of the button. By clicking on the button a message will append in a certain container.

Requirements

1. Node.js (No need to know nodejs development)
2. TypeScript Compiler
3. A good code editor (mine's VS Code)

Environment setup

I'm assuming that you have installed Node.js in your machine. Now you have to install typescript compiler. To do that open your command-prompt/terminal and type this:

npm install -g typescript

To check if it's successfully installed type this:

tsc --v

And yes we are good to go!

Project structure

Now let's organize our project. We need three files:

1. ButtonApp.ts (Here we're going to write our typescript code)
2. test.html (After compiling the .ts file we'll have a .js file which we're gonna test in this html file)
3. tsconfig.json (typescript compiler is going to use that configuration file for compiling purposes)

Now let's start writing our application...

ButtonApp.ts

We are gonna need an interface first for the button configuration. We need three properties for that:

Secondly, we are going to write a class for our button which will be used for creating the button:

Another class which is going to be used for rendering the HTML elements as per configurations:

And finally a class for our main app initialization:

We are ready for the compilation. Write these configurations to you tsconfig.json file:

So, we have told the compiler that which files are going to be compiled and where. There are other configurations too. You can find these on the official documentation.

Now navigate to your project folder, open your command prompt there and write:

cd typescript-demo
tsc

After compiling successfully you'll have a dist folder where you'll find a ButtonApp.js file. This is our compiled JavaScript version:

var ButtonApp = /** @class */ (function () {
    function ButtonApp(buttonConfigs) {
        this._buttonConfigs = [];
        this._buttonConfigs = buttonConfigs;
    }
    ButtonApp.prototype.initApp = function () {
        var appContainer = HTMLRenderer.createContainer('app-container');
        var btnConatiner = HTMLRenderer.createContainer('btn-container');
        var msgContainer = HTMLRenderer.createContainer('msg-container');
        this._buttonConfigs.forEach(function (btnConfig) {
            var btnElement = HTMLRenderer.createButton(new ShowTextButton(btnConfig), msgContainer);
            btnConatiner.appendChild(btnElement);
        });
        appContainer.appendChild(btnConatiner);
        appContainer.appendChild(msgContainer);
        document.body.appendChild(appContainer);
    };
    return ButtonApp;
}());
var HTMLRenderer = /** @class */ (function () {
    function HTMLRenderer() {
    }
    HTMLRenderer.createContainer = function (id) {
        var containerStyle = 'width: 100%; margin: 15px;';
        var container = document.createElement('div');
        container.setAttribute('id', id);
        container.setAttribute('style', containerStyle);
        return container;
    };
    HTMLRenderer.createButton = function (btn, msgContainer) {
        var btnConfig = btn.getConfig();
        var btnElement = document.createElement('button');
        btnElement.innerText = btnConfig.text;
        btnElement.setAttribute('style', "color: #ffffff; background-color: " + btnConfig.color + "; 100%; margin-right: 10px;");
        btnElement.addEventListener('click', function () {
            var msgText = document.createElement('p');
            msgText.innerText = btnConfig.message;
            msgText.setAttribute('style', "color: " + btnConfig.color + ";");
            msgContainer.appendChild(msgText);
        });
        return btnElement;
    };
    return HTMLRenderer;
}());
var ShowTextButton = /** @class */ (function () {
    function ShowTextButton(btnConfig) {
        this._btnConfig = btnConfig;
    }
    ShowTextButton.prototype.getConfig = function () {
        return this._btnConfig;
    };
    return ShowTextButton;
}());

Testing

Now it's time for testing our ButtonApp. In the test.html file write these lines:

We have imported our compiled js file and written some button configuration in window.onload method. After that we have initialized our ButtonApp.

And here are the result:

Now let's add another button in the config:

And this is our new button:

Conclusion

TypeScript is a cool language. We can use it anywhere which has a capability for running JavaScript. Angular 2+ applications are using it for a long time and you can also use it in ReactJS. If your application has a very complex UI logic, TypeScript will be there to help you certainly.