These days the interface of almost every web site is written in JavaScript. Even though this programming language has its own disadvantages, there is hardly any good alternative. That’s why developers usually have two options: either to continue using JavaScript or program in another language and then compile the code into JS.  

Many programmers choose the second option, thus in the last few years several add-on languages have appeared. Dart, CoffeeScript, ClojureScript and TypeScript are among them and the latter is getting traction.

TypeScript is a programming language where some of the JavaScript disadvantages are fixed. The code written in TypeScript looks very similar to JS, so it’s quite easy to learn for those who have even a little experience in front-end development, especially considering the fact that you can write the JS code inside the TS scripts.

The code in TypeScript can be compiled in JS and is suitable for any web browser. It’s an open source project, so it develops quite rapidly. TS has its own pros and cons when comparing it with JavaScript.

The difference between TypeScript and JavaScript

Although these two languages may seem to be similar, there are a number of features conveying a massive difference. The main of them are specified below.

  • JavaScript is a language for ui-scenarios(scripts) while TypeScript is more object oriented. It also enables working with interfaces;

  • TypeScript can maintain advanced modules while JavaScript does not have such a feature;

  • TypeScript has full support of functions with optional parameters while JavaScript does not (partially supported, but strictly depends position, they must be placed on the end of arguments enumeration to be optional);

  • JavaScript operates with dynamic typing when TypeScript maintains the static one allowing you to check accuracy already at the stage of compilation

There are many issues in JavaScript related to dynamic typing and generally strange data type behavior in some cases. For example, there is confusion when number 0 is equal to a string ‘0’ and an empty array, but at the same time the string ‘0’ is not equal to an array without elements. 

console.log(0=='0'); // logs true
console.log(0==[]); // logs true
console.log('0'==[]); // logs false

There are situations when dynamic typing can lead to some unexpected results. For example, you decided to create a function to calculate the sum of two numbers. The user is supposed to enter the numbers in a web form. 

When you receive the values and pass them as parameters to your sum(x, y) function, they are stored in a string format. Thus, the function will perform concatenation of two strings instead of calculating the sum. 

If you execute the code below and enter 3 and 4 in the appropriate fields, the returned result would be 34 instead of 7 as expected.

function sum(x, y) {
    return x + y;
  }
    const result = sum(
    document.getElementById("number1").value,
    document.getElementById("number2").value,
  )

  document.getElementById("result").innerText = result; 

In order to avoid issues with data types in JS, the programmers are forced to write multiple tests. On the contrary, typing in TypeScript is static which can help to detect and eliminate various problems already at the stage of compilation. 

You can rewrite the program above using TypeScript and get rid of unexpected results.

function sum(x: number, y: number): number {
    return x + y;
  }

There are numeric, string, boolean and other data types. You can even create your own type using the enum statement. At the same time the use of a special modifier (any) allows you to initialize your variable with the value of any data type. 

Another great feature of TypeScript is the support of access modifiers. There are three of them in TS: 

  1. public (the elements are available from anywhere without any restrictions, it is set by default) 

  2. private (the elements are accessible only from the class where they were defined)

  3. protected (the elements with this modifier can be accessed from the class where they were defined and its derived classes)

class Person
{
  public name : string;
  protected marriage : boolean;
  private id : number;
}

Among other TypeScript advantages is the possibility to initialize fields in constructors, type casting, abstract classes, generalization and many others. Of course, in the future some of these features may be implemented in JavaScript as well. It has already adopted many different options such as arrow functions, let and const identifiers etc.

Drawbacks of TypeScript

TypeScript is becoming more popular among programmers. Even some large projects choose to switch to it, for example, a very popular framework Angular.JS. Yet, the demand for JavaScript is overwhelming, while the development of any web-application in TypeScript is more expensive and time-consuming. 

For example, when there is a need to use frameworks or libraries not supported by TS, the programmers would need to describe the signatures of all the functions and methods on their own. Moreover, since TypeScript is more complex and supports more features, it’s much more complicated to start programming using this language without any basic knowledge. 

You need to know data types and object oriented programming quite well to be able to create programs in TS. Plus, there is a larger community of JavaScript developers providing assistance and tips with frameworks, libraries, etc.

Conclusion

Despite the fact that TypeScript offers a wider range of possible commands, JavaScript has occupied the dominant position in the world of front-end programming and it will have a leading role for a long time. The knowledge of JS is indispensable, especially considering the fact that TypeScript can be a quite difficult language to learn for those who don’t have any experience in programming. However, TypeScript can make your work in certain projects more convenient and safe.