Como os genéricos TypeScript ajudam você a escrever menos código

Quando os desenvolvedores discutem o Typcript, uma de suas principais reclamações é que você precisa escrever mais código para obter o mesmo resultado. Embora eu concorde com isso, acho que o Typescript Generics pode reduzir o código que você precisa escrever em grande medida.

O que são os genéricos TypeScript?

TS Generics pode ser usado para trazer abstração para suas interfaces TS. Usando genéricos, você pode passar uma interface como um parâmetro para outra interface.

Aqui está um exemplo de uma resposta padrão da API para um caminho feliz e um caso de erro.

// successful response ✅{	status: 'ok',	responseCode: 200,	data: {...}}// error response ❌{	responseCode: 500,	errorMessage: "Something went wrong 😅";}

Em vez de escrever uma interface para cada resposta e adicionar essas chaves, você pode simplesmente usar o Generics para criar algo como isto:

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

interface UserData {	name: string;	email: string;}const response: ApiResponse<UserData> = {}

Vinculando genéricos com funções

Vamos supor que temos uma função que usamos para fazer uma solicitação de API ao nosso back-end.

const getRequestTo = (endpoint: string) => {	return fetch(process.env.BE_HOST + endpoint).then(res => res.json())}const userResponse = getRequestTo('/user-data')

O tipo de userResponse seria any. Podemos ter uma melhor implementação TypeScript aqui.

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;};

Podemos criar uma função semelhante para solicitações POST que também usa JSON como parâmetros do tipo B e o servidor retornará uma resposta JSON do 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;};

Da mesma forma, também pode haver uma função de solicitação PATCH, que lida com atualizações parciais de qualquer entidade.

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;};

Aqui está como implementar algo assim:

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

Vamos juntar tudo isso com uma simples classe 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;	};};

e você pode criar um serviço de entidade como este:

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

e está tudo vinculado e pronto para você.

O texto datilografado tem o potencial de aumentar em dez vezes a experiência do desenvolvedor, se configurado adequadamente. Estas são algumas estratégias para tornar esse processo de configuração mais confortável. Espero que isso ajude você a usar o Typecript melhor em sua base de código atual.