Typescript: Types
Tags: typescript, webdev, beginners, tutorial
Published: 2022-12-31 12:30:00

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: 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.

### Table of Contents
- [Types in Typescript](#types-in-typescript)
  - [Situations to use typescript](#situations-to-use-typescript)
- [Primitive Types](#primitive-types)
  - [string](#string)
  - [boolean](#boolean)
  - [number](#number)
  - [Don't use `any`](#dont-use-any)


## 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.

```js
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-

```ts
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.

```ts
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-

```ts
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.

```ts
let price: number = 200;

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

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

<h3 id="dont-use-any">Don't use `any`</h3>

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:

```ts
// 👇 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:

```ts
let data; // type by default is any

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

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

**Another Example:**

```ts
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:

```ts
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:

```ts
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**

|Twitter |GitHub  | LinkedIn | Instagram | Website| Newsletter| Support |
|--|--|--|--|--|--|--|
| [![](https://cdn-icons-png.flaticon.com/32/4494/4494477.png)](https://twitter.com/j471n_) |[![](https://cdn-icons-png.flaticon.com/32/2504/2504911.png)](https://github.com/j471n) |  [![](https://cdn-icons-png.flaticon.com/32/3536/3536505.png)](https://www.linkedin.com/in/j471n/)|[![](https://cdn-icons-png.flaticon.com/32/174/174855.png)](https://instagram.com/j471n_)| [![](https://cdn-icons-png.flaticon.com/32/3178/3178285.png)](https://j471n.in)| [![](https://cdn-icons-png.flaticon.com/32/5822/5822078.png)](https://www.getrevue.co/profile/j471n) | [![](https://cdn-icons-png.flaticon.com/32/2935/2935413.png)](https://www.buymeacoffee.com/j471n)|