Complete Dive Into TypeScript: Part 1

Photo by Shahadat Rahman on Unsplash

This TypeScript series will be a multi-part blog on TypeScript and all about its features.

In this post, we will focus on an introduction to what TypeScript is, why you should use it, and a quick example of how TypeScript is helpful.

In the subsequent posts, I will be writing about more advanced concepts. So let’s start with it.In the subsequent posts, I will be writing about more advanced concepts. So let’s start with it.

What is TypeScript?

TypeScript is a JavaScript superset. It is a language built upon JavaScript and adds many features and advantages to JavaScript.

The problem with TypeScript is that it cannot be executed by the JavaScript environment like the browser, NodeJS.

But TypeScript is a powerful language with a compiler, which will run over your TypeScript code into JavaScript. The result of the TypeScript is a normal JavaScript code.

How does TypeScript gives all the new features, if we get JavaScript at the end?

TypeScript, although is very much identical to JavaScript, provides a new syntax, which adds a whole bunch of new features. The TypeScript compiler compiles this into JavaScript workarounds, the result of a simple TypeScript code might be a complex JavaScript snippet.

It’s not magic. It cannot add what’s not present in JavaScript language, but it can add new features which are easier to use and nice syntax.

The Type in TypeScript

TypeScript, adds something called as types. It adds a feature into the JavaScript language, which will give the developer an opportunity to identify the error earlier in the code before the script executes and an error occurs at the runtime in the browser.

So it not only gives new features, but it also gives an extra error checking, where errors that would be getting as runtime errors will get caught early during development.

I will show shortly what exactly it means.
But first, let us quickly do a setup to execute all TypeScript code.

Installing TypeScript

Here I will be assuming that NodeJS and NPM are already installed.

  1. Open up the terminal and run the npm install -g typescript . This will install TypeScript globally. This step is basically installing the TypeScript compiler
  2. A code editor. I prefer VSCode as it has a good support to TypeScript
  3. Create a new folder mkdir typescript-examples && cd typescript-examples
  4. Create a file index.html and add the HTML content
<!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>Document</title>  </head>  <body>  </body>  <script src="app.js"></script></html>

The app.js is not present. But it is something, TypeScript will be giving us

5. Create a file app.ts and add a simple statement in it

console.log("Hello TypeScript World")

6. From the terminal run the command

tsc app.ts

This will compile the TypeScript code. And the output will be a app.js file

Now if you open the index.html from the browser and check the chrome developer tools console, you will see the statement logged

TypeScript In Action

Now let us dive into a simple example of how TypeScript is useful

Close the app.js file (VSCode shows error when both .ts and .js files are opened, because of some constants used in multiple files)

In the app.ts , lets create a function to add 2 numbers

The moment you add this code in the VSCode editor, it starts to highlight the arguments. On hovering, it shows something like this:

In here, TypeScript is literally saying “Hey!!, I really don’t know you are giving me here. This could be anything.”

We can make this better, and make it more explicit by adding the following change to the function

function add(number1: number, number2: number) {
return number1 + number2;
}

This says that the function add takes in two parameters number1 and number2 , and the data type of both arguments will be a number .

Note the syntax number1: number . It’s a TypeScript syntax, which will throw an error if used in a JavaScript file.

So now, if you replace const n1 = 10 with const n1 = "10" , the VSCode will start to throw an error at the place where add function is called saying that Argument of type 'string' is not assignable to parameter of type 'number'

So you can already see how useful this can be. Consider this situation.

You might be reading the numbers from an HTML input element. When you read something from an input element, it will always be a string (no matter if the input type is a number).

When you read the value of this input using things like document.querySelector, the TypeScript will be smart enough to know that the value coming out of this will be a string. And invoking the add function will simply cause an error to show up because add function wants a number and not a string.

This will enforce the developer to make the necessary parsing before invoking the add function.

If you go ahead and compile it with the command tsc app.ts, it will throw the same error. Note here that a javascript file will still be generated. But they can be configured as required (we shall be looking into them soon)

Fix up the error by assigning a number to the variable n1 and compiling it with tsc app.ts. Now if you look at the app.js file, you will see that it’s just a regular vanilla JavaScript code, with no sign of any special syntax which we added in the app.ts file.

As I mentioned above, they are just TypeScript features. They are used to evaluate your code and find potential errors, and once they are compiled, they are stripped out and converted to regular JavaScript.

Hope you liked the quick short intro into TypeScript and hope this was helpful if you are new to TypeScript.

In my next post, I will be writing more about types used in TypeScript

Any comments, suggestions, feedbacks are welcome ❤️

--

--

--

Full Stack Developer | Javscript | ReactJS | Ruby On Rails | Gaming | Reading

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

MindFusion Releases Pack for JavaScript 2020.R1

Sorting in Data Grid for JavaScript

Creating Config Files in NestJS

NestJS Logo

Using Charts in Angular

Lazy loading of featured modules in Angular

How to Display Large Amounts of Data with Virtual Scrolling

sed: remove all digits from file

Rendering Arrays in React Components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bharat Hegde

Bharat Hegde

Full Stack Developer | Javscript | ReactJS | Ruby On Rails | Gaming | Reading

More from Medium

Complete Dive Into TypeScript — Part 2

Understandable Dependency Injection in JavaScript

Publish Typescript Package in NPM

Why you should leverage functional programming in JS