Comparing JS and TS
Today I am taking the leap to compare TypeScript with JavaScript and see what this hot commodity is. Let’s start with the basics — What the heck is TypeScript?
TypeScript is a superset of the JavaScript language that has a single open-source compiler and is developed mainly by Microsoft. TS has the goal to catch mistakes early through the development stages and then finally make a JS file at the end with no errors. While this sounds great, let’s get to comparing!
I am going to show you 3 files: JS-only.js, index.html and using-ts.ts(this file is in the pictures below). What I am going to do is compare what the index.html displays, when opened in the browser, with just the original JS file and then when you use TS. The basic HTML page looks like this:
index.html:<!DOCTYPE html>
<head> <meta charset="UTF-8"/>
<meta name="viewpoint" content="width=device-width",
initial-scale="1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Understanding TypeScript</title>
<script src="JS-only.js" defer></script></head><body> <input type="number" id="num1" placeholder="Number 1" />
<input type="number" id="num2" placeholder="Number 2" />
<button>Add</button></body></html>
Let’s look at the JS file:
JS-only.js://gather around the elements you need to operate on themconst button = document.querySelector('button')
const input1 = document.getElementById('num1')
const input2 = document.getElementById('num2')//function the simply addsfunction add(num1, num2) {
return num1 + num2
}//add an event listener to the button and listen for a click actionbutton.addEventListener("click", function () {
console.log(add(input1.value, input2.value));
});
Decipher these files and see what you get in the browser!
Here when you put into your terminal: open index.html — you will get a basic page that opens and looks like this:
Now you will want to open up the developer tools and type in any two numbers in the input boxes, see what happens when you click Add. In JavaScript it treats the inputs as strings and not numbers, so instead of adding the numbers 50 and 25 to get 75, you get 2025. JavaScript Concatenates the results, because it treats the inputs as strings. This will lead to errors if you don’t double and triple check. Some solutions in JS would be to parseInt(num1) and the other num2 or we can also add + signs to each as well. So can we solve this in JS, yes but let’s see what TS can do.
Directions to install TS — I use VSCode:
- Always check out the docs
- In your Terminal type: npm install -g typescript
- Now make a file using the .ts extension: using-ts.ts
- Copy the original js-only.js file over to the using-ts.ts file
- Let’s take a look at what the code editor doesn’t like together =>
You notice you have errors, delete or comment out the js-only.js file. Now you should have a file that looks like this:
One of the reasons TypeScript is called what it’s called is because it makes use of Types. In JavaScript, it was reading our parameters are strings instead of numbers, but TypeScript lets us fix this weakness.
First, we are going to look at our const variables. Here, we are gathering the elements we need — num1 and num2. In TypeScript, we can use ! right after these statements. This tells TS explicitly that this input value we are gathering will never yield null and that it will always find that element. As developers, we do the double checking and confirm this statement before we added in the !.
Then, we are going to add in a statement after the ! called typecasting. Typecasting is a syntax that tells TS what the input will be. This will say: as HTMLInputElement and should look like this —
After we explicitly let TypeScript know this information, we move onto the next function add. In TypeScript, we can explicitly state what type of objects we are using by doing the following:
We are stating that num1 and num2 are numbers. This makes adding them together easier, since we won’t have to convert the string to a number. We also add + to the console.log:
Now we compile the file by running: tsc using-ts.ts — what happens now? The terminal will make sure you don’t have any errors before translating the file. Notice a new file called using-ts.js? Pay attention to the .js extension. So to explain what happened, we need to understand that the browser can’t read .ts files. What TypeScript is doing is converting the .ts file to a .js file, to then run the code. You then notice a clean, dry version of JavaScript code. This is why TypeScript became a game changer to a lot of people.
In the end, I noticed TypeScript adds:
- Types
- non-JS features like interfaces or generics
- next generation JS features (compiled down for older browsers)
- meta programming features like decorators and more!
I hope this code along helped you compare the two! Keep coding, learning, comparing and make your own opinion! :)
xoxo,
Nicoll Oliver