Typescript Must-Know Types

Familiarity with any language comes from practising it and discovering tricks and tactics to code more efficiently. With that, there are basics, core concepts and hard parts of the programming. And knowing the essentials is the key. Here are some of the must-know essentials of TypeScript.

https://carbon.now.sh/

Typescript provide a variety of utility types for every use case and the rich documentation and community help you learn and use them. After getting started with Antonations, Interface and Types, Classes, Generics, Union and Intersection Types we are good to get along with some utility types.

Let's Get started.

You have a function which returns something. How to know what type the function returns?

const func = () => {
   const value = 'Value'
   return value
}

// We want to get the type of value outside the function
// Here we can use ReturnType utility function

type ReturnValue = ReturnType<typeof func>

and then you hover over the ReturnValue and you will see the return type of the function.

What if the function is async? After writing const func = async () you will get the type ReturnValue = Promise<string> which needs to be corrected. For this we have Awaited

const func = async() => {
   const value = 'Value'
   return value
}

type ReturnValue = Awaited<ReturnType<typeof func>>

When we inherit an interface into another interface we can check what we are inheriting from, all the keys and their types. What if we are inheriting an interface which is also inheriting an interface from another file? Imagine if the hierarchy increases.

interface User {
    name: string
    email: string
    dob: number
}

type Student extends User {
    schoolName: string
    grade: number
}

For this we use keyof utility type and using generic types, assigning all the data to a type

type GetAllTypes<T> = {
    [K in keyof T] : T[K]
}

type AllTypes = GetAllTypes<Student>

// Now if we hover over AllTypes we get keys and their types of Student and User

What if we want to update an interface we created in a controller which handles our types for a User object? We use this in the controller of creating, updating and listing the user.

interface User {
   name: string,
   age: number,
   city: string
}

Let us create an update function for the user obj

const updateUser = (user: User, updatedUser: User) => {
 return { updatedUser, ...user }
}

const firstUser: User = {
 name: 'Shrey',
 age: 24,
 city: 'Rajkot'
}

const userUpdate = updateUser(firstUser, { name: 'Shrey B'})

// The above line will show a red line under the second argument of the function
// Error saying missing property from type User

It is because we have to include all the keys from the User interface. This is not practical. What if the User interface had more than 50 fields and we want to update only 2? For this, we will need to update our update function. Sounds ironical.

const updateUser = (user: User, updatedUser: Partial<User>) => {
    return { updatedUser, ...user }
}

// Adding Partial type to User will make the keys of the interface User optionl
// It will behave like => name?: string

To do the exact opposite you can use Required type. You can also use the Pick type for this

If we are talking about the User interface which we use in the controllers we would have defined some keys which we don't want to use often or don't want to use at all like the isActive for soft delete or createdAt and updatedAt We can use omit type. Add createdAt key to your User interface.

interface User {
    name: string,
    age: number,
    city: string,
    createdAt: Date,
}
// After adding createdAt you will get the error in the firstUser obj
// Error stating the missing of newly added key

// Add the below code to resolve the error

type ActualUser = Omit<User, 'createdAt'>
const firstUser: ActualUser  = {
 name: 'Shrey',
 age: 24,
 city: 'Rajkot'
}

// Omit doesnot work for nested or complex objects for that use Exclude

There are many practical utility types Readonly<>, Extract<> and more. Check the official doc for more.

Do clap if you like and subscribe as there are more Typescript and Nodejs content in the queue.

Let's connect:
LinkedIn: Shrey Banugaria
Twitter: @ BanugariyaShrey