Introduction to Typescript


Typescript is a superset of Javascript developed by a team at Microsoft led by Anders Hejlsberg, the creater or C#.

As a superset typescript contains the entire Javascript with additional features.

All the standard control structures within Javascript are also found and usable within Typescript.

Typescript allows for easy structuring of large pieces of code, something that Javascript hasn't been know to provide.

It provides this by injecting:

  • Classes
  • Interfaces.
  • Modules.

These allow Typescript to provided better structuring than Javascript has always provided.

Majority of programmers from popular languages like Java, C# and Python are also already familiar with these Object Orientation features hence making the transition easier.

TypeScript is not only an easy language to program in but also provides a much better yet easier way of learning Javascript and programming as a whole.

From the onset it encourages you to structure your code and follow a popular programming paradigm in the name of Object Orientation.

With static type checking provided by the IDE, you can also anticipate and safely try out the various intellisense suggestions. In this way you learn easily by programming since it flags errors at compile time.

TypeScript, even though it provides us with nice modern features, doesn't impact your application's runtime performance.

This because it doesn't replace Javascript but instead compile to pure Javascript. So what the browser interpreter sees is not TypeScript but valid Javascript compatible with the all major browsers.

Example:

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

Best Regards.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think

Dear readers drop us your comments below. We are building a community of students and learners. Start by dropping us your suggestions below. What tutorials do you want us to do for example? Where can we improve? What are some awesome resources out there? Do you have any code you want to share with us?
By the way that example or snippet you have lying in your computer can really help beginner programmers. We can share it here with other students.

Next Post