How TypeScript Generics Help You Write Less Code

Utkarsh Bhimte — Wed, 05 Aug 2020 18:35:30 +0000

When developers discuss Typescript, one of their main complaints is that you have to write more code to achieve the same result. While I agree with that, I think Typescript Generics can reduce the code you need to write to a great extent.

What are TypeScript Generics?

TS Generics can be used to bring abstraction into your TS interfaces. Using generics, you can pass an interface as a param to another interface.

Here is an example of a standard API response for both a happy path and an error case.

// successful response ✅
{
    status: 'ok',
    responseCode: 200,
    data: {...}
}

// error response ❌
{
    responseCode: 500,
    errorMessage: "Something went wrong 😅";
}

Instead of writing an interface for every response and adding these keys, you can simply use Generics to create something like this:

interface ApiResponse<T>{
    errorMessage?: string;
    responseCode?: string;
    data?: T;
}
interface UserData {
    name: string;
    email: string;
}

const response: ApiResponse<UserData> = {}

Linking Generics with functions

Let's assume we have a function that we use to make an API request to our backend.

const getRequestTo = (endpoint: string) => {
    return fetch(process.env.BE_HOST + endpoint)
        .then(res => res.json())
}

const userResponse = getRequestTo('/user-data')

The type of userResponse would be any. We can have a better TypeScript implementation here.

const getRequestTo = async <R>(endpoint: string): Promise<ApiResponse<R>> => {
    const request = await fetch(process.env.BE_HOST + endpoint);
    const response = await request.json();
    return response;
};

We can create a similar function for POST requests which also takes JSON as params of type B and the server will send back a JSON response of type R:

const postRequestTo = async <B, R>(
    endpoint: string,
    body: B
): Promise<ApiResponse<R>> => {
    const request = await fetch(process.env.BE_HOST + endpoint, {
        method: "POST",
        body: JSON.stringify(body),
    });

    const response = await request.json();

    return response;
};

Similarly, there can be a PATCH request function as well, which handle‌s partial updates of any entity.

const patchRequestTo = async <B, R>(endpoint: string,body: Partial<B>): Promise<ApiResponse> => {
    const request = await fetch(process.env.BE_HOST + endpoint, {
        method: "PATCH",
        body: JSON.stringify(body)
    });
    const response = await request.json();
    return response;
};

Here is how to implement something like that:

interface RequestBody {}
interface Response {}

const createPost = await postRequestTo<RequestBody, Response>('/post', postData);

const updatePost = await patchRequestTo<RequestBody, Response>('/post', {
    title: "new name"
});

Let's pull it all together with a simple JavaScript class:

class ApiService<T> {
    constructor(entitySlug: string) {
        this.entitySlug = entitySlug;
    }

    private entitySlug: string;

    getOne = async (id: string): Promise<APIResponse<T>> => {
        const request = await fetch(process.env.BE_HOST + this.entitySlug + '/' + id);
        const response = await request.json();
        return response;
    };

    getList = async (): Promise<APIResponse<T[]>> => {
        const request = await fetch(process.env.BE_HOST + this.entitySlug);
        const response = await request.json();
        return response;
    };

    create = async (body: Omit<T, 'id' | 'created' | 'updated'>): Promise<APIResponse<T>> => {
        const request = await fetch(process.env.BE_HOST + this.entitySlug, {
            method: 'POST',
            body: JSON.stringify(body)
        });

        const response = await request.json();
        return response;
    };

    update = async (
        body: Omit<Partial<T>, 'id' | 'created' | 'updated'>
    ): Promise<APIResponse<T>> => {
        const request = await fetch(process.env.BE_HOST + this.entitySlug + '/' + body.id, {
            method: 'PATCH',
            body: JSON.stringify(body)
        });
        const response = await request.json();
        return response;
    };

    delete = async (id: string): Promise<void> => {
        const request = await fetch(process.env.BE_HOST + this.entitySlug + '/' + id, {
            method: 'DELETE'
        });
        const response = await request.json();
        return response;
    };
};

and you can then create an entity service like this:

export const postService = new ApiService<Post>('/post');

and it's all linked and ready for you.

Typescript has the potential to increase the developer experience tenfold if appropriately configured. These are some strategies to make that configuration process more comfortable. I hope this will help you use Typescript better in your current codebase.

Intro to AnimateSharedLayout from framer-motion v2.2

Utkarsh Bhimte — Wed, 05 Aug 2020 18:19:25 +0000

You might have seen a lot of layout transition examples now like this one here.

Layout animations like these have been common in native apps for years now, but it was way harder to implement these in web apps because one has to cater to multiple screen sizes.
The transitional motion was first promoted by Google to help developers build more intuitive user flows in their apps. material.io is a great resource to learn about their design principles in mobile applications.

Recently Framer came out with framer-motion v2 which includes AnimateSharedLayout which I believe, is the easiest way out there to build a transitional layout animation. Here is my guide on how to achieve that.

Firstly, You can start with creating the layouts as they are supposed to look using HTML and CSS or any styling library of your preference.

Then, Add motion. to the tag of the element that you want to animate, e.g. div becomes motion.div, h1 to motion.h1 and so on, motion supports all the HTML tags.
Then, add an attribute layoutId. Make sure these layoutIds are unique in both of the pages.

Once you are done with that, wrap the Routes on which you want to implement the layout transition with AnimateSharedLayout.

And It's as easy as that. Your app with killer layout animation is done 🎉

You can refer to this awesome example in the Codesandbox below that has been given by the framer-motion team.

I have started using it in my projects as well.

Utkarsh Bhimte

@bhimtebhaisaab

@framer motion has made page transitions soo easy.

This would surely bring a new level of UI interactions to the web platform.

13:43 PM - 27 Jul 2020

1 2

Do check out this API and share it with me on Twitter.

DEV Community: Utkarsh Bhimte

How TypeScript Generics Help You Write Less Code

What are TypeScript Generics?

Linking Generics with functions

Intro to AnimateSharedLayout from framer-motion v2.2