What is the Difference Between JavaScript & TypeScript?

JavaScript is a scripting language that in the early days ran only on web browsers to make websites dynamic.

Nowadays, apart from the browser, JavaScript is also used in many places such as – Server side, Mobile application development, etc.

Although JavaScript has evolved a lot over the years, it is still a weakly typed language, and therefore –

It is harder for developers to write large secure scalable JavaScript code as it makes the code less predictable.

In the following JS code, you can see that there is an add() function which takes two numbers to add. But –

You can pass any type of value (not only numbers) to the parameters and JavaScript will add them, and you will get an unexpected result if you not pass a number like the following code.

function add(num1, num2) {
    return num1 + num2;
}
console.log(add(true, 1));
// Result is => 2

Suppose you have written a lot of code and there is a variable that must have an array type value to get the correct result, but the variable contains an integer and you are not aware of it. After that –

You run the code and then get the unexpected result, and then you analyze the code, find the problem, and then find the solution. But –

What if you knew about this error before executing the code? Here TypeScript helps us to overcome the type problem of JavaScript.

What is TypeScript exactly?

TypeScript is a strongly typed programming language that uses JavaScript code syntax with the type mechanism and some additional features to produce scalable JavaScript code.

Code Syntax – JavaSript VS TypeScript

In the following image, you can see the pure JavaScirpt code on the left and the same program on the right, but in TypeScirpt syntax, where we have defined that num1 and num2 must be numbers and the add function must return a number.

Therefore in the add() function written in typescript, you cannot pass other than numbers to the num1 and num2, and you must return a number, otherwise, you will get error before the code even runs.

---

Why TypeScript?

TypeScript detects errors (based on the data types) without running our code as you can see in the following image. So it provides a better development environment.

---

How does TypeScript work?

TypeScript doesn’t run in browsers or any places where JavaScript runs, so TypeScript will not replace the JavaScript.

After writing code in TypeScript, you need to convert the TypeScript code into JavaScript code via TypeScript transpiler, then you can use that compiled JavaScript code anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps.

So you can say – TypeScript is a tool that make easy to develop large secure scalable JavaScript code.

---

How to use TypeScript?

First, install TypeScript via NPM, and obviously to use npm you must have Node installed in your system.

npm install -g typescript

# Check TypeScript Version using => tsc -v
C:\Users\user\Desktop> tsc -v
Version 5.0.4

This is a dummy index.ts file contains code for adding two numbers. .ts is the extension of every TypeScript file like .js is of JavaScript files.

const num1 = document.getElementById('num1') as HTMLInputElement;
const num2 = document.getElementById('num2') as HTMLInputElement;
const result = document.getElementById('result') as HTMLParagraphElement;
const addBtn = document.getElementById('add') as HTMLButtonElement;

function add(a: number, b: number): number {
  if (isNaN(a) || isNaN(b)) {
    alert("please enter valid numbers.");
    return 0;
  }
  return a + b;
}
if (typeof num1 !== 'undefined' && typeof num2 !== 'undefined') {
  addBtn.addEventListener("click", function () {
    let r = add(+num1.value, +num2.value);
    result.innerText = `${r}`;
  });
}

Convert typescript to javascript

Now to run an application written in TypeScript, the first step is to compile (convert) the code into JavaScript.

So let’s see how we can convert the above typescript code (index.ts) to JavaScript code (index.js) –

First open your terminal at the same location where the index.ts file is present, then use the following command to convert the index.ts to index.js file.

tsc index.ts

After running the above command, you will see that the index.js file has been created at the same location.

"use strict";
var num1 = document.getElementById('num1');
var num2 = document.getElementById('num2');
var result = document.getElementById('result');
var addBtn = document.getElementById('add');
function add(a, b) {
    if (isNaN(a) || isNaN(b)) {
        alert("please enter valid numbers.");
        return 0;
    }
    return a + b;
}
if (typeof num1 !== 'undefined' && typeof num2 !== 'undefined') {
    addBtn.addEventListener("click", function () {
        var r = add(+num1.value, +num2.value);
        result.innerText = "".concat(r);
    });
}

Now you can use the above JS code –

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add two numbers</title>
</head>
<body>  
<input type="text" id="num1" placeholder="Number 1">
<input type="text" id="num2" placeholder="Number 2">
<button id="add">Add</button>
<p id="result"></p>
<script src="./index.js"></script>
</body>
</html>