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.
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
