DEV Community

Cover image for Helpers por que utiliza-los?
Rogerio Orioli
Rogerio Orioli

Posted on

Helpers por que utiliza-los?

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,
}
Enter fullscreen mode Exit fullscreen mode

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 .

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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)