Forem: Shashwat Nautiyal

Master Typescript using Infer and Conditional types

Shashwat Nautiyal — Sun, 01 Jan 2023 10:11:06 +0000

Become an expert in typescript using Infer and Conditional Types

What are infer and conditional types in TypeScript?

Conditional types in typescript can help when you want to select the type of different kinds conditionally. Infer keyword makes dependent type more flexible. It allows users to infer some sort as a whole or a part of that type which is very powerful in some cases.

How to use infer and conditional types?

The conditional type uses generics to pass the parameter constrained by a condition. The tertiary operator is used to select the type in the typescript if a condition is satisfied or not.

Let us understand conditional types by an example 🧑🏻‍💻

type User = {
    name: string,
    email: string,
    followers: number,
    following: number,
    posts: number
}

type Admin = {
    name: string,
    email: string,
    isVarified: boolean,
    hasDbAccess: boolean,
}

type Profile<T extends "USER" | "ADMIN"> = {
    createdAt: Date,
    id: string
    type: T extends "USER" ? "user" : "admin",
    data: T extends "USER" ? User : Admin 
}

type UserProfile = Profile<"USER">
type AdminProfile = Profile<"ADMIN">

Here we have created two types UserProfile and AdminProfile that is extracted from ProfileResponse<"USER" | "ADMIN">. Typescript automatically determines the param passed in the arrow parameter and adds property accordingly. Conditional types help to reduce the number of lines in your classes and reduce redundancy in your code.

Now let's checkout infer by an example ✍🏻

type InferPromise<T> = T extends Promise<infer P>
  ? P
  : T extends (...args: any[]) => Promise<infer P>
  ? P
  : never;

type GetFullName = InferPromise<Promise<{firstName: "groww", lastName: "tech"}>>

const getName = async () => {
    return Promise.resolve({
        name: "groww"
    })
}

type GetName = InferPromise<typeof getName>

In the above example, we have created a InferPromise type that can infer the promise from the function or directly from the Promise class. The above example looks a little complex, but you do not have to worry. We will see another example.

type GetParamsAndReturn<T> = T extends (...args: infer P) => infer R
  ? { params: P; returnType: R }
  : never;

const getUser = (firstName: string, lastName: string, email: string, phone: string) => {

    return {
        name: firstName + lastName,
        email,
        phone,
        type: "user"
    }
}

type UserType = GetParamsAndReturn<typeof getUser>
type UserParams = UserType["params"];
type UserReturnType = UserType["returnType"]

Here GetParamsAndReturn<T> can take any function and return the function parameters and return type. We can use this type to get any function's parameter and the return type.

Conclusion

In this article, we saw two of the advanced types in typescript. We also learned how we could use infer and conditional types in code. So, the next time you see the infer and conditional types, you will understand them properly.

Understanding Generics in Typescript

Shashwat Nautiyal — Sun, 01 Jan 2023 08:57:27 +0000

Learn how generics in TypeScript can save your time in development

What are generics in TypeScript?

Generics in typescript give you the advantage of writing functions or classes where that single function or class can operate with any data type like an array, string, number, or object.

Ex- You want to create a stack data structure that can be used with any data type or write a custom hook for API services that returns typed data instead of “any” type.

Let us understand with code 🧑🏻‍💻

class Stack<StackType> {
    private items: StackType[];
    private top: number;
    constructor() {
        this.items = [];
        this.top = -1;
    }

    push(element: StackType) {
        this.items[++this.top] = element
    }

    pop() {
        return this.items[this.top--];
    }

    peek(){
        return this.items[this.top];   
    } 

    isEmpty(){
       return this.top === 0;   
    }

    size(){
        return this.top + 1;
    }
}
let stack = new Stack<string>();

Explanation 🙇🏻‍♂️

Here we have created a generic stack class that accepts the type argument in angle brackets “<>”. This stack class will create an items array of type parameter StackType and the push function will only accept the StackType in a parameter.

Ex- If we create a number Stack by let stack = new Stack<number>() then stack.push("hello world") will throw an error. You can only pass numbers in the push function like stack.push(1).

Diving deep into generics

There are mainly 3 main types of generics

Generic classes
Generic functions
Generic constraints

Generic classes are mainly used to create a generic data structure that can have multiple methods and variables. The type argument is passed only once in the generic class when it is instantiated.

class Todo<TodoType> {
  todos: TodoType[];
  constructor() {
    this.todos = [];
  }
addTodo(todo: TodoType) {
    this.todos.push(todo);
  }
getTodos() {
    return this.todos;
  }
}

Generic functions are functions that can accept any data type and return data accordingly. This makes the function more reusable and flexible.

let todos: any[] = [];
function addTodo<TodoType>(todo: TodoType) {
  todos.push(todo);
}

Generic constraints are very similar to generic types but it uses the extend keyword to force the user to add required parameters in a function call. The generic constraints add the constraint in the generic type function or class.

function removeKey<Type, Key extends keyof Type>(obj: Type, key: Key) {
  const _obj = {...obj}
  delete _obj[key];
  return _obj;
}
function updateTodo<TodoType extends {
  id: number
}>(newTodo: TodoType) {
  todos.forEach((todo, index) => {
    if(todo.id === newTodo.id) {
      todos[index] = {todo: removeKey(newTodo, "id"), id: newTodo.id}
    }
  })
}

In the above example, the “extends” keyword ensures that the id property exists in the newTodo and we can use the id in the function to find the todo and update it accordingly.

Code sandbox

How generics can help you in React?

You can take advantage of generics in React to create generic functions, custom hooks, or generic components. I will give an example of each which can help you to write your generics.

Use-cases 👀

Generic custom hook for fetching API

export const useFetch = <DataT>(api: string) => {

  const [status, setStatus] = useState<
    "fetching" | "success" | "error"
  >("fetching")
  const [data, setData] = useState<DataT>();
  const [error, setError] = useState<string>();
useEffect(() => {
    const fetchApi = async () => {
      try {
        setStatus("fetching")
        const res = await fetch(api);
        const data = await res.json();
        setData(data);
        setStatus("success")
      } catch(err) {
        setError(err)
        setStatus("error")
      }
    }
    fetchApi();
  }, [api])

  return {data, status, error} as const;
}
const { data, status, error } = useFetch<{
  title: string,
  description: string,
  id: number
}>(API);

Generic function for creating an array of mixed data type

function createArray<Type>(
  ...values: Type[]
): Type[] {
  return [...values]
}
const myArray = createArray<number | string>(
  "Hello", "World", 2022
);

Generic component that renders a list without using map

const List = <T extends unknown>({
  data,
  keyExtractor,
  renderItem
}: {
  data: T[];
  keyExtractor: (item: T) => string | number;
  renderItem: (item: T) => React.ReactNode;
}) => {
  return (
    <>
      {data.map((item) => (
        <React.Fragment key={keyExtractor(item)}>
          {renderItem(item)}
        </React.Fragment>
      ))}
    </>
  );
};
<List
  data={data}
  keyExtractor={({ id }) => id}
  renderItem={(item) => <div>{item.title}</div>}
/>

Code sandbox

Conclusion

In this article, we saw how generics can help you to write more reusable functions, components, and custom hooks. We also saw the different use cases of generics that helps you to build your logic with generics in React. It also provides a very good experience with IntelliSense integration in the IDE.

Custom Hooks in React

Shashwat Nautiyal — Sun, 01 Jan 2023 08:11:19 +0000

Learn how custom hooks can help you to write clean code

What are custom hooks?

Hooks were introduced in React 16.8. Hooks are simple functions that allow you to use React state and lifecycle in a functional component. React has some built-in hooks that give and provide the basic functionality to use form and lifecycle.

Custom hooks are user-defined functions prefixed with the “use” keyword. Depending on your logic, custom hooks may call another react hook or custom hook. It may return the function or state that re-renders the react component.

Why should we use custom hooks?

The main reasons to use customs hooks are:

It helps you to separate your logic from the user interface
It allows you to create re-usable logic blocks
It makes your component more understandable
It increases the modularity of your code

When should we use custom hooks?

Below are some cases when you should use custom hooks

When you are using the same logic in different components
When your logic is very complex
When you are working on a large-scale project

How should we use custom hooks?

Before discussing how to use custom hooks, let’s discuss how to write custom hooks.

We will create a basic form that persists the form data on local storage without a custom hook.

export default function App() {
  const [firstName, setFirstName] = useState(() => {
    if (localStorage.getItem("first-name"))
      return localStorage.getItem("first-name") ?? "";
    return "";
  });

  useEffect(() => {
    if (firstName) {
      localStorage.setItem("first-name", firstName);
    }
  }, [firstName]);

  return (
    <div className="App">
      <h1>Register Now</h1>
      <div className="input-wrapper">
        <label>First Name</label>
        <input
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
      </div>
      <button>Submit</button>
    </div>
  );
}

Now, if you want to add more input fields in the form like Last Name, Email, Phone, Address, and Password, then you have to write the useEffect() hook for each field, and soon your code will get messy and very hard to maintain.

Here custom hook solves this problem by extracting all the logic in the hook itself and returning the states that input fields can use.

Let’s create a custom hook for this logic.

import { useEffect, useState } from "react";

const useLocalStorageState = (key, state) => {
  const [localState, setLocalState] = useState(() => {
    if (localStorage.getItem(key))
      return JSON.parse(localStorage.getItem(key) ?? "");
    return state;
  });

  useEffect(() => {
    if (localState) {
      localStorage.setItem(key, JSON.stringify(localState));
    }
  }, [localState]);

  return [localState, setLocalState];
};

export default useLocalStorageState;

Important rules for using custom hooks

Never call Hooks inside loops, conditions, or nested functions.
Always use Hooks at the top level of your React component.
Never call Hooks from regular JavaScript functions.
Instead, call Hooks from React function components or call Hooks from custom Hooks.

Bonus Tip

If you want to follow these rules without checking manually, you can use eslint-plugin-react-hooks, which automatically gives an error on your IDE.

Code sandbox

Try refreshing the code sandbox page after filling out the form.

Conclusion

In this article, we saw how custom hooks could help you separate your logic from the user interface and increase code reusability. We also saw the rules of hooks and how to use the custom hooks. Custom hooks can help you write more clean code and build large-scale projects.