TypeScript Unlocked: Introduction

TypeScript Unlocked: Introduction

·

4 min read

💡
This article is a part of TypeScript Unlocked Series on my blog. Every article in the series is short, crisp and filled with examples and code snippets. If you want to learn TypeScript from scratch for absolutely FREE!!! check it out.

Hey there, happy to have you here! In this section we will see what is TypeScript, why do we use it and bit of it's history. Don't worry I won't bore you much I'm just covering this so you get the context why was TypeScript introduced in the first place.

💡
You should have basic knowledge and understanding of how JavaScript works and function to continue with this series.

JavaScript by nature is loosely typed or dynamic programing language which means we don't have to explicitly specify types in JavaScript as we have to do it in statically typed languages like C, C++ or Java. let's see some example to understand it better.

int age = 25
age = "25"

this code is invalid in C++, as its a statically typed language and we have specified age to be an integer so we can't assign a string value to age.

let age = 25
age = "25"

the above code is valid in JavaScript because it's dynamically typed. first we set age as a number than we change it to a string value. JavaScript will internally handle the type change for us unlike C++.

I know this seems pretty convenient now but this behavior can lead to pretty nasty bugs if you don't be careful with it.

Why use TypeScript ?

I'll really dumb down this example for understanding purpose. let's assume two or more people are working on a JavaScript code base and one person got a task to write a function to display age and he stored age as string for some reason.

let age = 25
// 1000 lines of code...
function displayAge(){
    // lines of code...
    age = "26" + " yrs"
    console.log(age)
}

if he tests his function the above code will run fine without any errors. now let's say another person got a task to write a function to check if the user is eligible to vote.

let age = 25
// 100 lines of code...
function displayAge(){
    // lines of code...
    age = "26" + " yrs"
    console.log(age)
}
// 100 lines of code...
function isEligibleToVote(){
    // lines of code...
    if (age > 18){
        return true
    }
    return false
}

Now if he tested his function it will work fine but did you notice the problem here? Until displayAge function is called everything will run smoothly but if we run isEligibleToVote function after displayAge our code will raise an error and our application will crash because age is no longer a number and we can't compare a string with a number.

This is how dynamically typed languages are prone to bugs. The above example was very simple which would most likely not happen in real world production scenario but many more complex and unexpected bugs can arise in production if we don't be very very careful. This is where TypeScript comes into the picture to save the day.

What is Typescript?

TypeScript was developed by Microsoft, led by Anders Hejlsberg. It addresses issues in JavaScript development by adding static typing, enabling better code organization, scalability, and error detection during development.

For the people who don't know. TypeScript is not a new programming language, it's just some syntactical sugar on top of vanilla JavaScript. You can imagine it as a layer of syntax of top of normal JavaScript syntax. TypeScript is just an development tool which makes your life easier by making you write better code. Ultimately the TypeScript code you write will be compiled into JavaScript because the browser/node only understands JavaScript.

Now let's see how can typescript solve the issue we discussed in the above example.

let age: number = 25

so when we are defining age we add a colon followed by number keyword which specifies that age should only contain a numeric value. Now whenever someone tries to store anything other than a number in age an error will get raised so future bugs can be prevented. This is one of the feature of TypeScript which helps us write a better quality code.

As we move on in the series we will see how you can install and use TypeScript in your codebases and we will discuss the following topics in detail.

  • Types

  • Functions

  • Type Aliases

  • Read-only, Optional and Type Mixing

  • Unions

  • Tuple

  • Interface

  • Public, Private and Protected

  • Getters and Setters

  • Abstract Classes

  • Generics

  • Narrowing

if you reached till here and you liked what you read don't forget to share it with other people. if you have any feedback or suggestions feel free to use the comment section. Hope you tag along till the end of this series and strengthen your coding armor by adding TypeScript to it. Happy coding!

Â