{"id":118020,"date":"2022-12-13T08:01:00","date_gmt":"2022-12-13T11:01:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=14475"},"modified":"2023-08-01T15:06:52","modified_gmt":"2023-08-01T18:06:52","slug":"o-que-e-typescript","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/o-que-e-typescript\/","title":{"rendered":"O que \u00e9 TypeScript e por que utiliz\u00e1-lo?"},"content":{"rendered":"\n

Typescript \u00e9 um superconjunto de JavaScript que foi desenvolvido pela Microsoft, mais precisamente por Anders Hejlsberg<\/strong>, arquiteto de software que tamb\u00e9m se envolveu no desenvolvimento de aplica\u00e7\u00f5es importantes como C#<\/a>, Delphi e Turbo Pascal.<\/p>\n\n\n\n

Veremos neste conte\u00fado o que significa o termo superconjunto – ou superset, em ingl\u00eas – e como o Typescript, que tem o c\u00f3digo aberto e est\u00e1 dispon\u00edvel no GitHub<\/strong>, pode ajudar a criar c\u00f3digos mais complexos e mais assertivos.<\/p>\n\n\n\n

Ao final voc\u00ea vai entender que o Typescript foi criado, basicamente, para elevar a qualidade da linguagem JavaScript<\/strong>.<\/p>\n\n\n\n

O que \u00e9 TypeScript?<\/strong><\/h2>\n\n\n\n

Antes de definir o que \u00e9 TypeScript, \u00e9 importante entendermos o que \u00e9 o JavaScript. <\/p>\n\n\n\n

JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o amplamente utilizada para desenvolvimento web. Seu uso mais comum \u00e9 para complementar aplica\u00e7\u00f5es em HTML e CSS com elementos gr\u00e1ficos animados em 2D ou 3D.<\/p>\n\n\n\n

Al\u00e9m disso, o JavaScript<\/a><\/strong> tem a capacidade de armazenar conte\u00fado \u00fatil dentro das vari\u00e1veis, realizar opera\u00e7\u00f5es com strings (trechos de linhas de c\u00f3digos) e responder a determinados eventos que acontecem numa p\u00e1gina web.\u00a0<\/p>\n\n\n\n

Em 2012, os engenheiros da Microsoft sentiram a necessidade de adicionar recursos e ferramentas que n\u00e3o existiam na base do JavaScript, ent\u00e3o criaram o TypeScript.<\/p>\n\n\n\n

O TypeScript segue a base do JavaScript<\/strong>, mas n\u00e3o configura uma nova linguagem de programa\u00e7\u00e3o: ele \u00e9 um superconjunto de JavaScript.<\/p>\n\n\n\n

Um superconjunto representa um punhado de ferramentas e m\u00e9todos que, nesse caso em espec\u00edfico, adicionam recursos de tipagem est\u00e1ticas e orienta\u00e7\u00e3o a objetos ao JavaScript.<\/p>\n\n\n\n

Depois de declarado, o c\u00f3digo do TypeScript \u00e9 transcompilado<\/strong> ou, para usar um termo mais simples, transformado em JavaScript antes de ser executado.<\/p>\n\n\n\n

A extens\u00e3o de um arquivo TypeScript \u00e9 .ts, mas como trata-se de um superconjunto de JavaScript, \u00e9 poss\u00edvel adicionar c\u00f3digos nativos<\/strong> da linguagem m\u00e3e. O contr\u00e1rio tamb\u00e9m \u00e9 v\u00e1lido: arquivos de extens\u00e3o .js tamb\u00e9m podem conter elementos do superconjunto.<\/p>\n\n\n\n

Ao mesmo tempo, os programadores contam com o suporte a diversas bibliotecas JavaScript<\/strong>, como Angular, Vue.js, D3.js etc.<\/p>\n\n\n\n

Para que serve o TypeScript?<\/strong><\/h3>\n\n\n\n

O principal uso do TypeScript est\u00e1 no desenvolvimento de sites e aplica\u00e7\u00f5es web que podem ser executados tanto do lado do usu\u00e1rio como do lado do servidor.<\/p>\n\n\n\n

Em outras palavras, pode ser usado tanto em programa\u00e7\u00e3o front-end quanto back-end.<\/strong><\/p>\n\n\n\n

O TypeScript tamb\u00e9m tem a capacidade de checar erros durante a digita\u00e7\u00e3o do c\u00f3digo com o recurso Intellisense, mesma ferramenta presente em algumas IDEs.<\/p>\n\n\n\n

As fun\u00e7\u00f5es principais do superconjunto s\u00e3o: aumentar os \u00edndices de produtividade do programador e potencializar as entregas do JavaScript, bem como criar aplica\u00e7\u00f5es mais seguras, escal\u00e1veis e complexas.<\/p>\n\n\n\n

Qual a diferen\u00e7a entre JavaScript e TypeScript?<\/strong><\/h2>\n\n\n\n

Antes do desenvolvimento do TypeScript em 2012, a linguagem JavaScript era usada apenas em algumas aplica\u00e7\u00f5es front-end com c\u00f3digos simples e trechos relativamente curtos.<\/p>\n\n\n\n

Mas depois que a Microsoft publicou esse projeto open source, ela abriu tamb\u00e9m a possibilidade dos desenvolvedores usarem a linguagem para trabalhar no back-end, j\u00e1 que o superconjunto \u00e9 capaz de atribuir ao JavaScript o paradigma de programa\u00e7\u00e3o orientada a objetos (POO)<\/strong>.<\/p>\n\n\n\n

Com o TypeScript \u00e9 poss\u00edvel usar vari\u00e1veis com tipos definidos, criar classes e usar princ\u00edpios de POO, como encapsulamento, heran\u00e7a, abstra\u00e7\u00e3o e polimorfismo, cujos detalhes veremos a seguir.<\/p>\n\n\n\n

Encapsulamento<\/strong><\/h3>\n\n\n\n

Atrav\u00e9s de setter e getters, o recurso de encapsulamento permite que o c\u00f3digo acesse atributos protegidos dentro de alguma classe.<\/p>\n\n\n\n

Isso significa que os blocos podem alcan\u00e7ar pontos espec\u00edficos do ambiente externo, o que permite a visibiliza\u00e7\u00e3o dessas caracter\u00edsticas pelos usu\u00e1rios.<\/p>\n\n\n\n

Heran\u00e7a<\/strong><\/h3>\n\n\n\n

A heran\u00e7a remete ao uso de classes m\u00e3es e filhas, nas quais as filhas podem herdar – e da\u00ed o nome – determinados atributos das m\u00e3es, ou ter a mesma estrutura com atributos diferentes.<\/p>\n\n\n\n

Normalmente utiliza-se o comando chamado \u201cextends\u201d e \u201csuper\u201d quando o m\u00e9todo de classe \u00e9 o subscrito.<\/p>\n\n\n\n

Nesse aspecto, a heran\u00e7a de caracter\u00edsticas e comportamentos da classe m\u00e3e n\u00e3o pede a redefini\u00e7\u00e3o das fun\u00e7\u00f5es.<\/p>\n\n\n\n

Abstra\u00e7\u00e3o<\/strong><\/h3>\n\n\n\n

A abstra\u00e7\u00e3o \u00e9 um conceito que existe para destacar caracter\u00edsticas de determinados elementos. A partir dela \u00e9 poss\u00edvel agrupar esses atributos do mundo real em classes ou ent\u00e3o usar fun\u00e7\u00f5es de sistema.<\/p>\n\n\n\n

Existem tamb\u00e9m as classes abstratas, que n\u00e3o t\u00eam uma representa\u00e7\u00e3o no mundo real, mas ainda assim s\u00e3o importantes e t\u00eam fun\u00e7\u00f5es fundamentais no sistema.<\/p>\n\n\n\n

Polimorfismo<\/strong><\/h3>\n\n\n\n

O polimorfismo \u00e9 um recurso que permite ao programador usar os atributos de uma classe em outra, de acordo com o que a situa\u00e7\u00e3o pedir.<\/p>\n\n\n\n

\u00c9 como se o desenvolvedor usasse o mesmo objeto mas de maneiras diferentes, como um martelo, que tanto pode fixar um prego quanto provocar extrema dor se acertar seu dedo.<\/p>\n\n\n\n

Principais vantagens em utilizar o TypeScript<\/strong><\/h2>\n\n\n\n

Uma das vantagens de usar o TypeScript \u00e9 a variedade de suporte a bibliotecas em JS, bem como documenta\u00e7\u00e3o de API. Quem \u00e9 programador sabe que as bibliotecas s\u00e3o uma excelente fonte de produtividade<\/strong>, j\u00e1 que fornecem uma s\u00e9rie de recursos prontos, facilitando o desenvolvimento do c\u00f3digo.<\/p>\n\n\n\n

Outra vantagem do TypeScript \u00e9 a facilidade e a clareza do c\u00f3digo, caracter\u00edsticas importantes<\/strong> que a tipagem est\u00e1tica proporciona para exibir os tipos das vari\u00e1veis usadas no c\u00f3digo.<\/p>\n\n\n\n

Sistemas mais complexos tamb\u00e9m podem ser constru\u00eddos a partir do TypeScript, sem deixar a desejar na qualidade e no acabamento do c\u00f3digo. <\/p>\n\n\n\n

H\u00e1 quem diga que o TypeScript n\u00e3o fica para tr\u00e1s de outras linguagens mais tradicionais<\/strong>, como \u00e9 o caso do PHP por exemplo.<\/p>\n\n\n\n

Outras vantagens importantes de usar o superconjunto s\u00e3o:<\/p>\n\n\n\n