OBLSK Logo

What is Typescript?

In the past couple of years, you might have seen the popularity of TypeScript increasing rapidly. Many of the web frameworks are now moving away from JavaScript and adapting TypeScript.

TypeScript is not a new language, it is an improved version of JavaScript. We can say that it’s a superset of JavaScript. It is a Statically typed open source programming language. Meaning that unlike JavaScript, the type of variables is known at compile-time.

In turn, it enables us to do some performance optimization as well as give protection from runtime errors.

TypeScript is designed by Anders Hejlsberg who is also the lead architect of C#. It was officially released by Microsoft in October 2012. Since then, its source code is available on Github.

The shift of AngularJS to Angular gave a big boost to TypeScript because it was one of the most popular front-end frameworks at that time.

Nowadays, TypeScript is used for both frontend and backend development. It is interesting to note that all three big frontend frameworks: React, Angular, and Vue.js support TypeScript. It can also be used along with Node.js in backend development.

The main two features of TypeScript are that it supports static typing and it is an object-oriented programming language (like C# or Java).

I will discuss all the points that make TypeScript stand out from JavaScript. Here is the table of contents for this article.

  1. Why TypeScript?
  2. TypeScript vs JavaScript
  3. Types in TypeScript
  4. Object-Oriented Programming Concepts in TypeScript
  5. Download and Install TypeScript
  6. How to practice TypeScript online?
  7. Companies that moved to TypeScript
  8. Conclusion

Why TypeScript?

The most important and basic reason for using TypeScript is that it is the extended version of JavaScript.

As you know that TypeScript is developed by Microsoft, so they completely support it in their other dev tools like Visual Studio Code.

TypeScript is a statically typed language it means that data type checking is done at compile time. In turn, it increases the development speed as you do not need to waste as much time finding type errors.

TypeScript vs JavaScript

In this section, I will discuss the similarities and differences between TypeScript and JavaScript.

TypeScript

  • TypeScript is an object-oriented scripting language.
  • TypeScript is a statically typed language.
  • TypeScript provides alerts you to type mistakes at compile time.

JavaScript

  • JavaScript offers dynamic typing. So, it is more flexible as you are not bound to the type system.
  • JavaScript catches type mistakes at run time, not compile time.
  • Javascript can directly run in the browser. Every modern web browser has a built-in JavaScript engine. For example, Google has V8 whereas Firefox has SpiderMonkey.

Types in TypeScript

Unlike JavaScript, TypeScript provides you the support of types. You can provide data types to your variables and once you assigned data types to a variable it cannot be changed.

Following are the data types which I’m going to explain to you in this article.

  • String
  • Boolean
  • Array
  • Any
  • Void

1 String

A string is the data type used to store text data and you have to write it in lower case like this (string). You can write the text data inside a single quotation mark or double quotations mark.

Here is an example of how you write string variables in your code.

    let userName:string = "John Doe"
    

Or

        let userName:string = 'John Doe'
    

2 Boolean

Boolean is a data type used in TypeScript through which you can assign a True or False value to a variable.

Here is an example of how you write boolean variables in your code.

        let stockAvailable:boolean = true;
    

Or

        let stockAvailable:boolean = false;
    

3 Array

Typescript also has an array just like JavaScript. An array is a data structure that contains a group of elements in which we can store values of different types. The type of Value can be string, boolean, Any, etc.

Here is an example of how you write an array in your code.

        let orderList:number[] = [1, 2, 3, 4, 5]; // for Number data type
    

Or

        let cityList:string[] = ["new york","london","San Fransisco"];
    

Or

        let goalScore:any[] = ['Ronaldo',5, "Messi",2];
    

4 Any

We use any as a data type in our code mostly when we do not have any prior knowledge about the type of the variable.

Here is an example of how you write any data type in your code.

        var amount:any = "fifty thousand";
amount = 40000;
    

We can also use any in Arrays where we have a string, number, boolean, or any other data type in the same array.

        let goalScore:any[] = ['Ronaldo', 5, "Messi", 2];
    

5 Void

We can specify void as return type when we do not want to return any data.

        function Country():void {
    console.log('Hello world')
        }
    

These are some of the data types that are used in TypeScript. If you want to learn more about data types in TypeScript you can check their official documentation.

Classes in Type

Classes in TypeScript are different from JavaScript. JavaScript has a prototype-based class system but the classes in TypeScript are like other OOP languages. Classes in TypeScript include variables, constructors, and methods.

You can create the instance of the class by making the object using a new keyword. Following is an example code of the class in TypeScript.

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
let Std1 = new student("daniel");
Std1.Reg(5);

Download and Install TypeScript

There are three ways to install TypeScript. These are mentioned below.

  • npm modules
  • NuGet package
  • Visual Studio Extension

Let’s say you are working on a Node.js project. Here, the best option will be to use the npm module to install TypeScript because npm comes with the latest Node.js releases. You can even use other dependency managers like yarn.

For the sake of an example, I will use npm to install TypeScript on a computer. Following is the command to install TypeScript.

npm install -g typescript

How to practice TypeScript online?

As we know that every popular web browser has the support of a JavaScript engine like Google has V8 and Firefox has SpiderMonkey. TypeScript is inherited from JavaScript but it cannot directly run in the web browser.

So, the developers of TypeScript provide an online playground where we can try this new language. Simply click TypeScript Playground to practice it online.

Conclusion

If you are familiar with object-oriented programming languages like JavaScript, C#, or Java then it shouldn’t take long to understand the concepts of TypeScript. I recommend you to check their official documentation for further details and a good place for beginners to start.