One of the frequently asked questions I receive is, what is the difference between JavaScript and Typescript?

Let’s find out…

From the time you started coding, JavaScript (JS) would have been part of all your front-end projects. If you are a little familiar with JS, think of TypeScript as JS plus some additional features that make your application neater and typed. The typeScript was developed as an open-source project by Microsoft to make JS development more efficient and catch compilation errors early on.

In this article, we will discuss some important features of JavaScript and TypeScript and the differences between both scripting languages.

What is JavaScript?

JavaScript is used for client-side scripting. You can create a script on an HTML page or create a file with a .js extension and include it in your HTML file. A common real-world example where you can see JavaScript is the login page validation, where you are shown an error when your username/password is incorrect.

Let us write a simple JS code and run it on the browser:

Create a file example.html and add the following code:

<script>

feeling = 'happy';

feeling = 23;

</script>

This simple code declares a variable and assigns a value of happy (string) to it. We can assign a value of a different type (number) to the same variable. JavaScript wouldn’t complain of it and we can run the code on any browser without any issues. Now, let us get the value of feeling from the user:

Our HTML will look like this:

<input type = "textbox" id = "howyoufeel">

and the script will be:

feeling = document.getElementById("howyoufeel").value;

Unless we put explicit checks in the script, JS will accept any value from the user and pass it on. So, you can put anything like 234, @.#$%, etc. in the feeling variable.

Features of JavaScript

From the above, we can observe the following features of JavaScript:

  • Weakly typed scripting language
  • Used for client-side and server-side (with node.js) scripting
  • Flexible and dynamic
  • Supported by all major browsers
  • Lightweight and interpreted

If you are interested in mastering JavaScript then check out this Udemy course.

What is TypeScript?

A real-world application will have many validations and dynamic checks. For such applications, JavaScript code will become hard to test at some point, mainly because there is no type checking. While getting values from users, it is important to get them right at the beginning itself.  This is where TypeScript pitches in.

TypeScript is strongly typed and has a compiler that complains if you don’t define the type of a variable.

Both JavaScript and TypeScript conform to the ECMAScript specifications for a scripting language. Typescript can run all the JavaScript code and supports all its libraries – that’s why it is called the superset of JavaScript.

TypeScript installation

To execute our previous code in TypeScript, we need to install the TypeScript compiler using the npm package (if you have node js).

npm install -g typescript

or download it directly from the official Microsoft downloads page. You can also use the TS playground to see how the code is trans-compiled from ts to js.

Once this is done, you can configure the project settings in tsconfig.json and use any IDE or text editor to write TypeScript code and save it as .ts.

You can still get away by not defining the variable type and TypeScript can infer the data type. However, you will get a ‘feeling’ error if you give anything other than the first used type (in our case, a String) – during compilation itself.

It is always neat for the code to have a type annotation for maintainability and ease of use:

var feeling: string = “happy”;

That’s not it!

TypeScript provides many other features to make a developer’s life easier.

Features of TypeScript

Typescript has a rich feature set and every release comes with new features to make development easier than before. For example, with the new release (4.0), some additional features are variadic tuple types, custom JSX factories, class property inference from constructors, etc. Some typical features of TypeScript are:

  • Supports object-oriented programming concepts like interface, inheritance, class. generics
  • Early detection of errors
  • IDE support with syntax check and suggestions
  • Easier to debug as it is typed
  • Trans-compiles into JavaScript
  • Used for both server-side and client-side applications
  • Cross-platform and cross-browser support
  • Supports all the JS libraries and extensions

Why do we need TypeScript? (Advantages of TypeScript over JavaScript)

Microsoft developed and used TypeScript for two years for its internal projects before making it public in 2012. They created a typed JavaScript because it was easier to test the code for production-grade enterprise applications. You can still use the dynamic typing features but also type the variables when it is really required.

Consider the below code:

var mynum  = //get from user;

addten(number){

return number + 10;

}

We would expect the result to always be a number. But, what if a user gives “sheep”? The output will be sheep10 – ideally, we need to tell the user that this operation is not possible!

Also, when you have the type information available, the text editors and IDEs become handier to use and save runtime errors. It is also easier to refactor the code at a later point in time.

Does that mean we don’t need JavaScript? (Disadvantages of TypeScript over JavaScript)

You can think of TypeScript as an extension of JavaScript, but certainly not a replacement.

For smaller chunks of code, TypeScript can become an overhead – installing, compiling, trans-compiling will be redundant. With JavaScript, you can simply type your script in HTML and it would work. It is also easier to debug the code when you can simply refresh the browser every time you change something.

Head-to-head comparison

Now that we’ve understood the features and advantages of both TypeScript and JavaScript, let us go through more comparisons:

TypeScript JavaScript
A typed language that catches compilation errors early on You can find out errors during runtime
Suitable for large projects as it improves code maintainability and readability As more code is added, becomes difficult to test and debug, thus JS is suitable for small projects
Superset of JS, i.e., features like object-orientation, type-checking, and more A scripting language that supports dynamic web content creation
Requires compiler installation and configuration setup No need for any installation; JS code can be directly written in a browser using <script> tag
All .ts files are converted to .js files before execution; known as trans-compilation Developers can directly include .js files within HTML files for execution using <src> tag.
Powerful and intuitive with rich features like modules, generics, interfaces Suitable for simple web applications that do not require advanced features
Used for server-side and client-side scripting Easy to use for client-side scripting, but becomes heavy and complex for server-side scripting
Takes time to execute because of the compilation step No compilation is required hence faster execution
Supports both static and dynamic typing Supports only dynamic typing
We can specify type annotation as:

var feeling: string = “happy”;

 Type annotations cannot be specified as we cannot define types.

Conclusion

From a learning perspective, JavaScript could be your natural choice. You open a file, type something inside <script></script> tags, save it as an HTML – you will see the results! You can then build on it to create more dynamic content.

Further, when you are working on a large-scale application, having JavaScript knowledge will help you shift to TypeScript easily.

However, from a career and pay perspective, as a TypeScript developer, you will be more flexible and comfortable with both JS and TS projects – so definitely a better asset in the market. Typically, TypeScript developers are paid anything between $110k-$147k, whereas JS developers are paid around $63k-$118k per annum.