Como voc\u00eas devem saber, o JavaScript puro n\u00e3o tem tipos est\u00e1ticos. A tipagem do JavaScript \u00e9 din\u00e2mica e ocorre em tempo de execu\u00e7\u00e3o.
![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/1-1024x310.png\" "\\"-\\"")
O TypeScript \u00e9 uma linguagem que estende os recursos atuais do JavaScript com a possibilidade de adicionar tipos est\u00e1ticos predefinidos na sua aplica\u00e7\u00e3o<\/strong>, em tempo de compila\u00e7\u00e3o. Ou seja, o exemplo anterior poderia ser reescrito da seguinte forma:<\/p>\n\n\n\n
![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/2-1024x310.png\" "\\"-\\"")
<\/h2>\n\n\n\nTipagem est\u00e1tica<\/h2>\n\n\n\n
Conforme mencionado anteriormente, o TypeScript traz a robustez de uma tipagem est\u00e1tica para aplica\u00e7\u00f5es JavaScript, o que torna seu projeto muito mais escal\u00e1vel, conciso e com a possibilidade de identificar bugs ainda em tempo de compila\u00e7\u00e3o<\/strong>. Recentemente, no Blip<\/a>, fizemos uma reformula\u00e7\u00e3o quase que total da nossa base de c\u00f3digo em JavaScript para TypeScript. Isso tornou o nosso c\u00f3digo mais confi\u00e1vel, leg\u00edvel e menos tolerante a falhas. Nas especifica\u00e7\u00f5es mais recentes do JavaScript (ECMAScript 2015 ou ES6), j\u00e1 \u00e9 poss\u00edvel utilizar a programa\u00e7\u00e3o orientada a objetos utilizando classes e extens\u00f5es. Entretanto, esse recurso n\u00e3o \u00e9 suportado em browsers mais antigos<\/a>, sendo necess\u00e1ria a utiliza\u00e7\u00e3o de algum transpilador de Javascript<\/a> para uma especifica\u00e7\u00e3o mais antiga. No TypeScript, \u00e9 poss\u00edvel combinar o uso de classes com interfaces, adicionando uma esp\u00e9cie de \u201ccontrato\u201d na implementa\u00e7\u00e3o de uma classe e possibilitando a sua reusabilidade. O interessante nesse caso \u00e9 que as interfaces em TypeScript n\u00e3o precisam necessariamente ter uma implementa\u00e7\u00e3o<\/strong>, como \u00e9 o caso do Java. A interface pode ser utilizada, por exemplo, em um par\u00e2metro de uma fun\u00e7\u00e3o ou na declara\u00e7\u00e3o de uma propriedade de uma classe. Os decorators s\u00e3o extremamente \u00fateis quando h\u00e1 a necessidade de adicionar ou alterar comportamentos de classes, m\u00e9todos, atributos ou assessores (getters e setters). S\u00e3o basicamente o que temos em Java chamado de annotations<\/strong>. O TypeScript ganhou uma grande ado\u00e7\u00e3o com a populariza\u00e7\u00e3o do Angular<\/a>. A partir da segunda vers\u00e3o, o framework foi totalmente reescrito utilizando essa linguagem, adotando tamb\u00e9m uma nova forma de construir aplica\u00e7\u00f5es. Neste post, tentei responder de forma bem abrangente por que usar TypeScript em suas futuras (ou atuais) aplica\u00e7\u00f5es. Existem muitos pontos positivos ao utilizar o TypeScript, mais especificamente uma linguagem tipada, principalmente quando se trata de aplica\u00e7\u00f5es de grande porte. E a\u00ed, j\u00e1 sabe por que usat TypeScript na sua aplica\u00e7\u00e3o? Espero que voc\u00ea tenha gostado do post! E se voc\u00ea est\u00e1 procurando um lugar onde ter\u00e1 oportunidade de trabalhar com as tecnologias mais recentes e ter liberdade de propor suas ideias, vem pra Take! Temos v\u00e1rias vagas abertas para a \u00e1rea de TI!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Se voc\u00ea \u00e9 um desenvolvedor front-end, certamente j\u00e1 ouviu falar da linguagem TypeScript. Mas afinal, o que de fato ela \u00e9? Por que usar TypeScript? E ainda, em que tipo de projeto devo utiliz\u00e1-la?Depois de uma boa caminhada utilizando o TypeScript como linguagem principal do meu dia-a-dia de trabalho, tentarei mostrar as principais vantagens de […]<\/p>\n","protected":false},"author":511,"featured_media":5019,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-5002","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devs"],"lang":"pt","translations":{"pt":5002},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/5002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/users\/511"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/comments?post=5002"}],"version-history":[{"count":0,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/5002\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media\/5019"}],"wp:attachment":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media?parent=5002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/categories?post=5002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/tags?post=5002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Al\u00e9m de possuir os tipos b\u00e1sicos conhecidos de programadores back-end, como number, string, boolean, object e array, o\u00a0TypeScript tamb\u00e9m possui os chamados Union Types<\/strong>, que nos permitem a uni\u00e3o entre dois tipos distintos para a cria\u00e7\u00e3o de um novo.![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/3-1024x557.png\" "\\"-\\"")
No exemplo acima, temos um tipo chamado de \u201cDog\u201d e um tipo chamado \u201cCat\u201d, ambos declarando um objeto com duas propriedades. O tipo “DogOrCat” \u00e9 um Type Alias<\/a> de uma uni\u00e3o entre os dois tipos declarados anteriormente. Com isso, \u00e9 poss\u00edvel combinar v\u00e1rios tipos na forma\u00e7\u00e3o de um \u00fanico, dando mais flexibilidade \u00e0 vari\u00e1vel que for utiliz\u00e1-lo.<\/p>\n\n\n\nClasses<\/h2>\n\n\n\n
O TypeScript j\u00e1 faz essa tradu\u00e7\u00e3o para uma vers\u00e3o que browsers mais antigos entendam de forma autom\u00e1tica. Al\u00e9m do mais, \u00e9 poss\u00edvel utilizar modificadores de acesso public, private e protected nos atributos e m\u00e9todos da classe, conforme o exemplo a seguir:<\/p>\n\n\n\n![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/4-1024x533.png\" "\\"-\\"")
<\/h2>\n\n\n\nInterfaces<\/h2>\n\n\n\n
Confira o exemplo abaixo:![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/5-1024x879.png\" "\\"-\\"")
Na primeira linha, foi declarada a interface IPerson, que possui dois par\u00e2metros: age e talk. Age \u00e9 do tipo number, e talk \u00e9 uma fun\u00e7\u00e3o que n\u00e3o possui retorno (void).
A interface criada pode ser utilizada tanto na implementa\u00e7\u00e3o da classe Person quanto no par\u00e2metro da fun\u00e7\u00e3o renderPerson.
Repare que o atributo city \u00e9 opcional. Os demais atributos precisam necessariamente estar implementados na classe Person e estarem presentes nas propriedades do argumento \u201cp\u201d da fun\u00e7\u00e3o renderPerson.<\/p>\n\n\n\nDecorators<\/h2>\n\n\n\n
![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/45610888_2012684152148714_3765391321527746560_n-e1541610858457.jpg\" "\\"-\\"")
<\/figure>\n\n\n\n![\"por](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2018\/11\/7.jpg\" "\\"-\\"")
<\/figure>\n\n\n\n
Para exemplificar, vamos criar um decorator para uma propriedade que apenas loga a classe de destino e o nome da propriedade:
Neste exemplo, toda vez que a propriedade model for acessada, iremos logar o seu nome e a classe na qual ela est\u00e1 sendo inserida. Para exemplificar em um contexto um pouco mais \u00fatil, vamos criar um decorator \u201ctimeout\u201d, que ir\u00e1 executar um m\u00e9todo de uma classe ap\u00f3s x milisegundos definidos como par\u00e2metro:
Nesse exemplo, o m\u00e9todo start ser\u00e1 executado ap\u00f3s 2 segundos (ou 2000 milisegundos) ap\u00f3s a sua chamada. Dessa forma, conseguimos limpar o nosso c\u00f3digo atrav\u00e9s de uma feature bastante \u00fatil, tornando o nosso c\u00f3digo mais leg\u00edvel. Na documenta\u00e7\u00e3o<\/a> da linguagem, voc\u00ea pode encontrar outras formas de utiliza\u00e7\u00e3o interessantes para o seu dia-a-dia.<\/p>\n\n\n\nQuem utiliza TypeScript?<\/h2>\n\n\n\n
Outro software conhecido pelos desenvolvedores, o VSCode<\/a> utiliza em seu c\u00f3digo-fonte tanto o TypeScript como JavaScript puro. O React possui um starter kit<\/a> para TypeScript tamb\u00e9m.
Outra surpresa interessante foi a ado\u00e7\u00e3o do TypeScript pelo VueJs nas pr\u00f3ximas vers\u00f5es<\/a>, anunciada pelo project lead do framework em uma confer\u00eancia em Londres. Al\u00e9m das empresas\/frameworks citados acima, aqui no Blip <\/a>tamb\u00e9m estamos utilizando o TypeScript no nosso front-end e t\u00eam nos atendido muito bem! \ud83d\ude42<\/p>\n\n\n\nConclus\u00e3o<\/h2>\n\n\n\n
Entretanto, nem tudo s\u00e3o flores e, na mesma medida em que adicionar tipos na sua aplica\u00e7\u00e3o pode significar uma maior robustez, significa tamb\u00e9m uma maior verbosidade no c\u00f3digo e uma maior curva de aprendizado para novos integrantes do seu time, caso ainda n\u00e3o tenham trabalhado com a linguagem.
A escolha desse tipo de stack deve ser baseada em experimenta\u00e7\u00f5es<\/strong> e, principalmente, em uma conversa bem alinhada com o seu time<\/strong>. Pontos positivos como a possibilidade do uso de interfaces, identifica\u00e7\u00e3o de bugs em tempo de compila\u00e7\u00e3o, robustez e todos os outros pontos positivos citados devem ser levados em conta, mas pontos negativos como maior curva de aprendizado, alta verbosidade e aumento de complexidade do c\u00f3digo tamb\u00e9m devem ser discutidos.<\/p>\n\n\n\nOutras linguagens tipadas que compilam para JavaScript<\/h2>\n\n\n\n