Basic types in Typescript

You might have heard different terms for Typescript that it is a superset or add some flavours to JavaScript. Yes there is a co-relation, and strong bonding between both.

Typescript adds another layer over javascript which gives us more powerful features mainly related to type checking. Lets have a basic look on them and then move on some advance features of typescript.

Primitive Types

There are three primitive data types in JS string, number, and boolean. For arrays you use syntax like array[] and here you can define whether this array is of which primitive type for example: array of string will be string[], array of number will be number[], and for boolean[].

Any

Any is a special type which is mostly used when we don't want to give type explicitly to a variable and want to skip type checking errors. Typescript always assumes any if you are not providing type to a variable. When a value is of type any, you can access any properties of it (which will in turn be of type any), call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s legal.

However this is not a good practice because it is not type checked.

Annotations

You can give type to a variable while declaring with let, const, or var.

let name: string = "your name";
const phone: number = 99532;

Also you can annotate parameters of a function with return types to a function

function sayHello(name: string): void {

    console.log("Hello, " + name.toUpperCase() + "!!");

}

Union Types

Typescript allows you to mix and create a union by using more than one data type. Syntactically this happens using pipe for example

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}

printId(101);  // This will work fine as number data type is allowed

printId("202");  // This will work fine as string is allowed


printId({ myID: 22342 });  // Error as you cannot assign Object

Please note here typescript allows other methods only if you they fullfill union. For example you cannot use id.toLowecase() here as it will not fullfill condition for type number.

null and undefined

JS has two values which shows the value of variable is absent. Typescript behaves according to the option you have configured for strictNullChecks. If it is off then both values are accessible normally but in case it is on then you have to strictly check a variable for these values.

Literal Types

In case you want to set specific string in type literal types can be very helpful. Syntactically you can use literal types

For example:

let x: "hello" = "hello"; // x is type of string "hello"

x = "hello"; // this is fine as types are matching 
x = "howdy"; // Error as you cannot assign howdy to hello

You can do this with function parameters as well

function printText(s: string, alignment: "left" | "right" | "center") {

}

printText("Hello, world", "left"); // OK as parameter types are matching
printText("B'day, mate", "centre"); // error as type mismatch

Similarly there are many types like enums, Object types, alias and interface which are also helpful in scenarios where you need a set of variables with strict types. Thus typescript is so powerful to use. Only with primitive data types you can do so much by mixing them.

Thanks for reading. Please do like if you've learned something new today.