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.
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.
Top comments (0)