TypeScript Basics - The Definitive Guide

In this article, we will learn some basics of typescript which helps you to develop javascript application in a better way. TypeScript Basics - The Definitive Guide

What is TypeScript and why we need it?

So, before diving into the concepts of typescript. we should know what is typescript and why it is needed.

Firstly, TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

As a Javascript developer, there is one thing that we miss when compared with other languages such as Java,C#. that is, TypeCheck.

languages like java checks the type of defined variable in the compile time itself unlike javascript. it helps to solve lot of bugs in the compile time itself

To solve this problem in javascript. TypeScript is introduced.

Setting up TypeScript

TypeScript is only for development purpose. Since, browser/JS engine doesn't understand anything except javascript.

So, we need to compile the typescript to javascript before running it the server/browser.

Here's an article explaining the complete setup and production deployment of typescript in Node.js Application.

Understanding Types

Types are not a new in javascript. javascript already have dynamic types. they are,

  • Undefined
  • Null
  • Boolean
  • Number
  • String
  • Symbol
  • Object

But, these types in javascript are dynamic. javascript checks the type of variables in run time.

Instead of checking the type in runtime, Typescript check that on compile time. static type predicts the value of dynamic types.

Basic Static Types


it is a textual data surrounded by single or double quotes

1const message: string = "hello world"


this type represents the boolean value which is either true or false

1const isType: boolean = false


this type represents the integer value in the variable. there are four type of number literals supported in the number type

1const age: number = 40


there are two ways to type check an array in Typescript. first way is to add [] to the element type

1let newArray: string[] = ["one", "two", "three"]

second way is to use the keyword Array with the type,

1let newArray: Array<string> = ["one", "two", "three"]


enums allow us to declare a set of named constants i.e. a collection of related values that can be numeric or string values.

Mainly, there are three types of enum,

  • Numeric Enum
  • String Enum
  • Heterogenous Enum
1enum Status {
2 Inactive = 0,
3 active = 1,
1enum Status {
2 Inactive = "INACTIVE",
3 active = "ACTIVE",


if the variable type is not known and we don't want the type checker for the particular variable, then the type of any can be used.

1let checkValue: any = true
3checkValue = "Check"
4checkValue = 14


void is used when there is no return value in the function. if there is no return data type for a function, void is used.

1const LogIt = (): void => {
2 console.log("log")

Type Inference

Mainly, TypeScript has a feature which identifies the type of variable from the value assigned to it. it is called Type Inference.

For example,

1let userName = "String"

TypeScript identifies the variable userName as a string from it's value. and throw error if you assign a type number to it.

This concept is called as Type Inference.


Firstly, interface in Typescript is a way to check the type of an object. if we want to check the type of values in group. Interface is the best choice.

For Example,

1interface userData {
2 name: string
3 age: number
6let AddUserDetails = ({ name, age }: userData): void => {
7 let arr = []
9 arr.push({
10 name,
11 age,
12 })
15AddUserDetails({ name: "Ganesh", age: 25 })

Here, we have a function called AddUserDetails which takes two arguments such as name and age.

To check the Type of Both arguments, we need interface. So, we created an interface userData and typecheck it.

if we pass first value as number, it will throw an error. Alternatively, we can define type of any to pass value.


In TypeScript, Generics enables you to create reusable code components that work with a number of types instead of a single type. For Example,

1const createNewArray = (value: string): Array<string> => {
2 let output: Array<string> = []
4 output.push(value)
6 return output

Here, function createNewArray takes an argument with type string and return an array with that value. but what if we want to create an array with type number.

above implementation with throw an compilation error on that scenario. we can solve this problem using Generic.

1const createNewArray = <T>(value: T): Array<T> => {
2 let output : Array<T> = [];
4 output.push(value);
6 return output;
9let val = createNewArray<string>("fdfsd");

The above example has a generic type T that corresponds to the type of the argument that is passed to the createNewArray function.

T is a naming convention that represents string here, because we are passing Type string while we call the function.

If we change the type to number while we call function/class. it will take the type dynamically. that's the beauty of Generics

there are different way to implement the generics, we can implment it in Interface, Class and Type Generics.


Honestly, we barely scratched the surface of TypeScript. we will see this concepts in more depth in upcoming articles, until then you can refer some wonderful articles on typescript.

TypeScript Handbook (Official TypeScript docs)

TypeScript Deep Dive (Online TypeScript Guide)

Understanding TypeScript’s Type Annotation (Great introductory TypeScript article)

To Read More

Modern React Redux Toolkit - Login ...

User Authentication is one of the common workflow in web applications. In this t...

Building Nodejs Microservice - A Cl...

This Article explains everything about how to build Nodejs Microservices in clou...

I Accidentally wiped the entire dat...

One of the tragic accident in my job turned out to be good learning for me in re...