Learn TypeScript Basics

5 min readMay 11, 2021

After reading this article you will get to know the basics of TypeScript and why you want to use it ? Learn TypeScript and start adding types to your JavaScript code!

What is TypeScript ?

A TypeScript is a SuperSet of JavaScript language it means with new feature and all of the things that JavaScript can do and also come with a extra feature and new syntax.

Why do we need TypeScript ?

Having types checked during compile time helps developer write better code. Developers can make sure that things don’t fail during runtime.

Consider the above code snippet in .ts file

Let us see the equivalent typescript declaration of sum function in typescript:

The issue in the scenario above can be caught earlier with typescript. Typescript will complain you if you are trying to pass a string to a declaration of types of number.

Let us learn the most basic types in TypeScript:

There are 3 categories of types in TypeScript: any, Built-in and user-defined.

any: the any type is a superset of all Typescript data types, It means that a variable can be of any type. If we use this type, it will override type checking.
Built-in: types include number, string, boolean, undefined, null, and void.
user-defined: types include enum, array, interface, class, and tuple.

How to use TypeScript types:

Assigning types: To assign a type in TypeScript you need a colon :, The name of the type, an equal =, and the value of that variable. For Example

Number: TypeScript support decimal, hexadecimal, octal, and binary literal. In TypeScript, all numbers are floating point values.

Boolean: Boolean values function just like they do in Javascript.

Array: In TypeScript, arrays are the collection of the same object, You can also assign multiple types to one array using the | operator

Tuple: Tuple can contain two values of different data types.

Consider the following example of number, string and tuple type variables.

Void: Void is used where there is no data. For example, if a function does not return any value then you can specify void as return type.

Enums: Enums or enumerations are a new data type supported in TypeScript. enums allow us to declare a set of named constants i.e. a collection of related values that can be numeric or string values. Enums can be defined using the keyword enum.

String: String is another primitive data type that is used to store text data. String values are surrounded by single quotation marks or double quotation marks.

Type Inference:

It is not mandatory to specify the type of a variable. TypeScript infers types of variables when there is no explicit information available in the form of type annotations.

Types are inferred by TypeScript compiler when:

Variables are initialized
Default values are set for parameters
Function return types are determined

For example:-

The above code shows an error because while inferring types, TypeScript inferred the type of variable a as string and variable b as number. When we try to assign b to a, the compiler complains saying a number type cannot be assigned to a string type.

Mapped Type:

TypeScript provides a way to get a new type based on an existing one with the aid of the mapped types. If you want to alter each property’s type in the same way, you should definitely go for the mapped types. For example, you could have an existing interface keep all the same members but change into read-only or optional. Before the mapped type, we would have to create an extra interface to reflect the final state we want, which can pollute the code and lead to issues.

And without the mapped type, every interface would require a separate function, so things can get out of control quickly. Thanks to the custom logic of a mapped type in Typescript, we don’t have to deal with those issues.

There are different mapping functions in Typescript: partial, nullable, pick, omit, record, extract, exclude, and ReturnType.

Objects:

Let’s consider an object, to define the type of an object, let’s use type annotation.

In the snippet above, we are assigning the type Person to the user object. Thus trying to assign values of other types will throw error.

Type Checking and Assertions:

Let’s look at how we can check that our variable has the right type. Here are the two most common approaches.

Instanceof:

This operator can check for custom types not defined by Javascript. Below, we first write a custom type, make an instance of it, and check that it is indeed the right variable.