TypeScript: Types of Types

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.

Introduction to TypeScript

Ponikar ・ Jun 21 '21 ・ 3 min read

#javascript #typescript #beginners #react

TypeScript: Any | Unknown | Never

Ponikar ・ Sep 4 '21 ・ 3 min read

#typescript #javascript #webdev

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 and experiment these examples by your own. This will give you good understanding about Typescript.

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

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

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

 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.

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.

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.

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

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.

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.

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