In this article, we are going to learn about how we will use typescript to make sure that variable type is secure and no other value can manipulate that variable. For example: a string value cannot be assigned to a numeric variable.

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Types in Typescript

• number

• string

• boolean

• null

• undefined

• void

• object

• array

• tuples

• unknown

• never

• any (should not use)

and many more.

Situations to use Typescript

For example, there is a function increaseScore and it takes currentScore and increases the score by increaseBy number and returns the updated score.

function increaseScore(currentScore, increaseBy){
    return currentScore + increaseBy;
}

increaseScore(10, 2) // output : 12
increaseScore(10, "2") // output : 102

If someone passes the string or other thing, then it will throw an error in the production or runtime. Such as in the second example where the score becomes 102 it's a bug as shown in the image.

Now, How can we prevent that using typescript? We will look at the later in depth. You can define the type of a variable like this-

let variableName: type = value;

Primitive Types

Primitive types in JavaScript are-

• string

• boolean

• number

string

String values are surrounded by single quotation marks or double quotation marks. They are used to store text data.

let player: string = "John";

// ✅ CORRECT
player = "anny";

// ❌ ERROR: Type 'number' is not assignable to type 'string
player = 4;

As you can see we assign the name (Anny) in line 3 and we assign the number in line 4 and it immediately throws an error. It's what typescript is. You don't need to run the TS to get the error as JS does.

boolean

In boolean it could be either true or false otherwise, it will throw you an error as shown in the following code-

let isLoggedIn: boolean = false;

// ✅ CORRECT
isLoggedIn = true;

// ❌ ERROR: Type 'number' is not assignable to type 'boolean'
isLoggedIn = 5;

// ❌ ERROR: Type 'string' is not assignable to type 'boolean'.
isLoggedIn = "hello";

number

JavaScript does not have a special runtime value for integers, so there’s no equivalent to int or float - everything is simply number that's why in line 5 when we assign the price to 500.53 it doesn't give you an error because it's a number.

let price: number = 200;

// 👇✅ CORRECT
price = 300;
price = 500.53;

// 👇❌ Error
price = false;
price = "3000";

Don't use `any`

So the question occurred that why Shouldn't we use any? The answer is simply because when you use any then you disable all the type checking for that variable and anyone can assign any kind of value to the variable. For example:

// 👇 Wrong Practice (by default 'any')
let hello;

// 👇 'hello' can take any type of value
hello =  2;
hello =  "world";
hello =  true;

On line: 1 we have not defined the type of the variable hello so its defaults as any and you can assign whatever you want as shown in the above example.

Now Imagine the scenario where you are calling an API and getting the data in the string format, but someone changes it to the boolean or number then your whole app functionality will crash due to that mistake. And Typescript prevents you from doing that. For example:

let data; // type by default is any

function getData(){
    //.........API Call
    return  "Message";
}

data = getData();         // no issue because expected string

Another Example:

let data;

function getData(){
    //.........API Call
    return 823;
}

data = getData();         // ISSUE: expected string but returns the number (won't throw error because type is `any`)

Solution:

let data: string;

function getData(){
    //.........API Call
    return  "Message";
}

data = getData();

Now, if you pass something that is not a string then it will throw an error as shown below:

let data: string;

function getData(){
  //........API Call
  return true;
}

// ❌ ERROR: Type 'boolean' is not assignable to type 'string'
data = getData();

You can use any whenever you don’t want a particular value to cause type-checking errors.

I'll cover void, never and others later in this series.

Wrapping up

In this article, I explained how you can use typescript to make sure that variable type is secure and no other value can manipulate that variable.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me