Gen茅ricos de TypeScript para escribir menos c贸digo

Te presentamos usar gen茅ricos de TypeScript para escribir menos c贸digo, ya que al usar Typecript se entiende que se puede escribir m谩s c贸digo para lograr el mismo resultado. Sin embargo, Typecript Generics puede reducir el c贸digo que se necesita escribir.

Gen茅ricos de TypeScript

TS Generics se puede utilizar como abstracci贸n a las interfaces TS. Usando gen茅ricos, se puede pasar de una interfaz como par谩metro a otra interfaz.

A continuaci贸n vemos un ejemplo de una respuesta API est谩ndar para una ruta feliz y un caso de error.

// successful response 鉁

{

                status: ‘ok’,

                responseCode: 200,

                data: {…}

}

// error response 鉂

{

                responseCode: 500,

                errorMessage: “Something went wrong 馃槄”;

En vez de escribir una interfaz para cada respuesta y agregar estas claves, simplemente se puede utilizar Generics para crear algo as铆:

interface ApiResponse<T>{

                errorMessage?: string;

                responseCode?: string;

                data?: T;

}

interface UserData {

                name: string;

                email: string;

}

const response: ApiResponse<UserData> = {}

Gen茅ricos vinculados con funciones

Supongamos que tenemos una funci贸n que utilizamos para realizar una solicitud de API a nuestro backend.

const getRequestTo = (endpoint: string) => {

                return fetch(process.env.BE_HOST + endpoint).then(res => res.json())

}

const userResponse = getRequestTo(‘/user-data’)

El tipo userResponse podr铆a ser any. Podemos tener una mejor implementaci贸n de TypeScript de esta forma:

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;

};

Adem谩s podemos crear una funci贸n similar para solicitudes POST que tambi茅n toma JSON como par谩metros de tipo B de esta forma el servidor enviar谩 una respuesta JSON de tipo 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;

};

Tambi茅n puede haber una funci贸n de solicitud PATCH, que actualiza parcialmente cualquier entidad.

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;

};

Explicamos c贸mo implementarlo:

interface RequestBody {}

interface Response {}

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

const updatePost = await patchRequestTo<RequestBody, Response>(‘/post’, {

                title: “new name”

});

Deberemos juntarlo con una clase de JavaScript:

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;

                };

};

Despu茅s crear un servicio de entidad como este:

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

Todo estar铆a vinculado y listo.

Postservice
VS Code sugiere autom谩ticamente seg煤n la configuraci贸n implementada

Typecript puede aumentar diez veces la experiencia del desarrollador si se configura adecuadamente. Esto ayudar铆a a usar Typecript en la base de c贸digo actual.

Le铆ste: Usar gen茅ricos de TypeScript para escribir menos c贸digo, te recomendamos: Pasos para el desarrollo de complementos en WordPress

Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode