TypeScript: Types of Types
Tags: javascript, typescript, webdev, beginners
Published: 2022-01-09 11:29:39

Hey there, I hope you are doing great! This is my third post about typescript and this is one of the most important topic to discuss. 

### Hold on

Before you go ahead I am assuming that you have basic knowledge of what is typescript and how does it works but if you don't have any idea about typescript than you can checkout my other blogs.

{% post https://dev.to/ponikar/introduction-to-typescript-1acj %}

{% post https://dev.to/ponikar/typescript-any-unknown-never-1idc %}

### How to read this blog?

This blog is more like Crash Blog.😂

I have wrote this blog along with examples. Unfortunately I cannot add Interactive code snippets like CodeSandBox. 

My advice is to visit this [playground] (https://www.typescriptlang.org/play) and experiment these examples by your own. This will give you good understanding about Typescript.

Let's go........

![Typescript] (https://media.giphy.com/media/RleLlzY0MVxY7N5xX7/giphy.gif)



### Quick recap of `Types` and `Interface` 

Although typescript gives you **default type annotations** like `string`,`number`,`boolean`, etc. You may need to create your **own types** according to your need or when you are working with real world project.

`type` and `interface` let you create your own type. So you can use it anywhere in your project.

> As I promised everything is driven by examples. Let's see. 

Suppose I want to create a `User` type that contains some properties like `name`, `email`, `contactNumber` etc.

`User` type with `interface`

```javascript

interface User {
   name: string; 
   email: string;
   contactNumber: string;
}
```

Taddda! We have create our first type. You may say that this is something like creating an object. You are slightly right. This is more like creating `user-defined` type than object.

`User` type with `type`

```javascript
 type User = {
   name: string; 
   email: string;
   contactNumber: string;
}
```

You may notice that the both ways of defining type are almost similar. So when should I use which one? 

There is **one major difference between these two is that `interface` let you inherit another `interface` like a One class can inherit another class**. 

```javascript
interface A {}

// B can access all the types of A.
interface B extends A {}
``` 

If you facing situation something like this. Feel free to use 
interfaces. 

### What is types of types?

If you are using typescript, there are highly chances that you will ended up writing more and more codes. But there is a one way we can try to avoid it. 

it simple mean is that you can create **types from the existing types dynamically**.

There are some helpful type annotation that let you to build types from types. 

#### `keyof` 

Let get start with keyof. keyof returns the **union of keys of type OR interface**. (consider keys as the left hand side properties of type and interface).

Let's take an example.

```javascript
interface User {
   name: string;
   email: string;
   contactNumber: number;
}

// PropertyOfUser can be name | email | contactNumber
type PropetyOfUser = keyof User; 
```

#### Generic Types

Generic types are fun. that basically let you **pass a type as argument of another type** that you can assign in various way.

```javascript

// assigning default type, if nothing is provided. 
type User<GenderType = "male" | "female"> = {
   name: string;
   gender: GenderType;
}

type UserAccount = User<"male"> // pass that type as an argument.
```

This is a very made up example to explain you how the Generic Types work. You can **assume this type similar like functions which take and argument and perform some tasks.** 

> The given type is not recommended way to write `User` Type. It was just for the example. 

This is really useful in various ways. Especially if you want to make more reusable types.


#### Type Indexing. 

Type indexing gives **type of particular property/key** of interface or type. 

Here's example. 

```javascript
type User = {
  name: string;
  gender: "male" | "female";
}

type genderOfUser = User["gender"]; // type indexing
```

This is very hypothetical example I have taken, but you can see that **instead of writing `male` or `female`. We can just assign type index.**


### Mapping 

Mapping is a process of **iterating over keys of type and let you modify the type of that key**. 

Didn't get it? Let's see an example. 

```javascript 

type User = {
  email: string;
  password: string;
}

type RequireUserFields = {
  [T in keyof User]: boolean; 
}
```

In above example we are just making another type by using User Type. We are **iterating through the keys and assigning a `boolean` type.** You can see the advantage here that you **don't need to manually write all the keys** of User type again.


This was very high level overview of How you can write dynamic types that avoid unnecessary typescript code.

If you found this helpful, please let me know your thoughts in comments.

If you think there is something wrong or missing. Please let me and other readers know about it.

If you want to ask some questions about typescript or anything about Front-end dev. You can reach me on Twitter. 
[@iponikar] (https://twiiter.com/iponikar).


Thank you for reading this blog. See you soon with another one.

![Typescript] (https://media.giphy.com/media/mqd0IiCu4iBVK/giphy.gif)