O que são "Helpers" ?
Helpers São funções frequentemente usadas em varios locais da aplicação e que devem ser abstraidas para facilitar a manutenção e legibilidade do código.
Exemplo Prático !
Geralmente em um e-commerce, existe vários
locais da aplicação que necessite renderizar o preço em formato de preço,
pois nas API's geralmente não nos serve já no formato desejado para renderização no front-end.
Exemplo de um retorno de API.
{
"id" : 2,
"name" : "Café Espressso",
"price" : 7.00,
"whishlist" : true,
}
Criando um Helper
Para criar um Helper basta criar uma pasta e um arquivo dentro da pasta com
o nome coerente da função que seu Helper irá desenvolver
Exemplo da estrutura de pasta .
Para deixar nosso Helper exposto é só usar o comando export na constante ou método
export const currency = (value: number) => {
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL',
}).format(value);
}
Usando o Helper
Para usar o Helper basta importa-lo e utilizá-lo conforme a necessidade ,
importante sempre lembrar utilizar Helper para não ficar repetindo código e de facilitar a manutenção.
Exemplo de código
import { currency } from "../../helper/currency";
Agora sempre que precisar converter um numero para Preço (Moeda) é so
importar e invocar o metodo e passar o valor por parametro.
Exemplo de código
const valor = 0.00
currency(valor) //r$0,00
Importante
Esse Helper foi para um exemplo de preço , porem sua aplicação deverá ter
outros Helpers para diferentes apelos .
O objetivo é o conceito de como se pode usar helper e te ajudar a programar
de forma mais organizada.
Gostou do contéudo ?
Manda um feedback compartilhe com seus colegas .
github : @rogeriorioli
instagram : @oriolidev
Top comments (0)