DEV Community

Rogério dos Santos Fernandes
Rogério dos Santos Fernandes

Posted on • Updated on

Operador de navegação segura vindo para JS/TS

O que você fizer, faça com amor. Eu gosto de aplicar isso ao meu código. Pense que o código que você escreve será o código que alguém irá ler mais tarde.

Nesse post, discutiremos um pouco sobre validações em objetos que podem ser nulos na hora da execução do código (runtime).

Precisamos fazer isso para validar o retorno que veio de uma Requisição Http:

if (response.data && response.data.result)
  return response.data.result.map(mapFunction());
Enter fullscreen mode Exit fullscreen mode

pra validar que os paramêtros da nossa função foram passados corretamente:

function onSuccess(response) {
  if (!response || (response && !response.data))
    return new Error(`Hmm, where's my param?`);

  // else, do something
}
Enter fullscreen mode Exit fullscreen mode

ou pra acessar algum dado em um modelo com diversos níveis aninhados:

if(account && account.role && account.role.permission)
  account.role.permission.ToString();
Enter fullscreen mode Exit fullscreen mode

Lidar com isso pode gerar código de difícil leitura, testabilidade e manutenabilidade.

Algumas ações podem ajudar bastante, como uma camada compartilhada (um encapsulador das comunicações Http, por exemplo) que lida com erros http e diminui a quantidade de validaçõe que você terá que fazer nos seus componentes e módulos.

Um Design de API conciso, para ajudar seus consumidores a lidar com seus dados. Uma API com uma estrutura ruim pode prejudicar bastante o código de seus clientes! Tente evitar muitos níveis diferentes para acessar alguma informação, tenha um contrato bem claro, um recurso deve ter apenas um contrato, diferente estrutura deveria levar a um recurso novo. Se você está fazendo micro serviços, GraphQL pode ser bom pra você. TypeScript pode ajudar dizendo o que pode ser nulo durante o desenvolvimento.

Dito isso, uma boa maneira de lidar com isso a nível de linguagem é muito bem vindo! E temos boas novas! Há alguns dias atrás, o Operador de navegação segura passou pro estágio 3, entrando no roadmap pro TS 3.7.0!

Quando isso for lançado, poderemos fazer:

return response.data?.result?.map(mapFunction());
// undefined if something is undefined/null or the method result

if(!data.result?.length) return new Error('Hmm, still not getting it');

account.role?.permission?.ToString();
Enter fullscreen mode Exit fullscreen mode

Acredito que isso irá nos ajudar a escrever códigos menores e mais legíveis. Angular 2+ já provê isso do lado Html através do Template Syntax.

Apesar de ser uma ótima adição para uma linguagem que vêm evoluindo rápido como o JS, é importante notar que temos outras ações que devem ser tomadas para garantir a qualidade do nosso código.

Próximos passos..

Agora, podemos acompanhar a implementação dessa funcionalidade no Github.

O grupo TC39 faz um ótimo trabalho garantindo que o JavaScript continue evoluindo e se tornando cada vez mais uma linguagem consistente e forte. TypeScript vêm junto, nos dando uma ótima opção dentro desse ecosistema.

Se você quer ficar por dentro das novas funcionalidades vindo aí no JS e TS, recomendo que leia os artigos abaixo!

TC39 Github
TC39 process

Top comments (0)