{"id":11670,"date":"2021-05-14T10:44:44","date_gmt":"2021-05-14T13:44:44","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=11670"},"modified":"2024-09-24T18:27:48","modified_gmt":"2024-09-24T21:27:48","slug":"introducao-a-typescript","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/introducao-a-typescript\/","title":{"rendered":"Introdu\u00e7\u00e3o a Typescript: o que \u00e9 e como come\u00e7ar?"},"content":{"rendered":"\n

Sabendo das limita\u00e7\u00f5es que o Javascript possui, Anders Hejlsberg, que tamb\u00e9m participou da cria\u00e7\u00e3o do C#, do Delphi, do Turbo Pascale da plataforma .NET, resolveu criar o Typescript.<\/p>\n\n\n\n

O objetivo era elevar o n\u00edvel de c\u00f3digo do JS, que era usado apenas do lado cliente e em c\u00f3digos pequenos. <\/p>\n\n\n\n

Hoje, o cen\u00e1rio \u00e9 outro, pois a possibilidade de aplicar uma arquitetura mais s\u00f3lida e melhores pr\u00e1ticas de programa\u00e7\u00e3o mudaram essa realidade.<\/p>\n\n\n\n

O Javascript suporta o paradigma de Programa\u00e7\u00e3o Orientada a Objetos gra\u00e7as ao Typescript, podendo usar vari\u00e1veis com tipos definidos, criar classes…<\/p>\n\n\n\n

Hoje voc\u00ea vai entender como funciona o Typescript, suas diferen\u00e7as e vantagens perante o Javascript e porque voc\u00ea deveria us\u00e1-lo.<\/p>\n\n\n\n

O que \u00e9 TypeScript<\/h2>\n\n\n\n
\"O
Representa\u00e7\u00e3o do superset Typescript<\/figcaption><\/figure>\n\n\n\n

Typescript \u00e9 uma linguagem de c\u00f3digo aberto desenvolvida pela Microsoft que foi constru\u00edda em cima do Javascript, que \u00e9 muito difundido atualmente. Ent\u00e3o esse “superset” foi criado para adicionar recursos de tipagem est\u00e1ticas \u00e0 linguagem original.<\/p>\n\n\n\n

Em outras palavras, temos todas as funcionalidades do Javascript no Typescript acrescidas de v\u00e1rias outras funcionalidades que caracterizam o Typescript.<\/p>\n\n\n\n

Embora Typescript seja um superset do Javascript, na hora de compilar o c\u00f3digo, todo Typescript \u00e9 convertido\/transpilado para Javascript.<\/p>\n\n\n\n

A pessoa desenvolvedora que estiver escrevendo c\u00f3digos em Typescript lidar\u00e1 com uma sintaxe simplificada, mais clara e suportada por v\u00e1rios TaskRunners ou IDES, mas o seu c\u00f3digo voltar\u00e1 a ser JS ap\u00f3s transpilado.<\/p>\n\n\n\n

Isso se d\u00e1 pelo browser n\u00e3o entender a sintaxe de outra linguagem de programa\u00e7\u00e3o que n\u00e3o seja Javascript.<\/p>\n\n\n\n

Qual a diferen\u00e7a entre TypeScript e JavaScript<\/h2>\n\n\n\n
\"Typescript
Rela\u00e7\u00e3o entre supeset Typescript e Javascript<\/figcaption><\/figure>\n\n\n\n

Bom, j\u00e1 que TS nasceu de JS e veio para suprir algumas limita\u00e7\u00f5es, vou apresentar algumas diferen\u00e7as b\u00e1sicas entre os dois:<\/p>\n\n\n\n

Caracter\u00edsticas do Typescript<\/strong><\/td>Caracter\u00edsticas do Javascript<\/strong><\/td><\/tr>
Tipagem est\u00e1tica<\/td>Tipagem din\u00e2mica<\/td><\/tr>
Orienta\u00e7\u00e3o a objetos<\/a><\/td>Programa\u00e7\u00e3o estruturada<\/td><\/tr>
Gen\u00e9ricos<\/td>Fun\u00e7\u00f5es<\/td><\/tr>
Namespaces<\/td>Prototypes<\/td><\/tr>
Decorators<\/td>Fun\u00e7\u00f5es contrutoras<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Nesse sentido, dizer que TypeScript \u00e9 outra linguagem de programa\u00e7\u00e3o diferente do JavaScript n\u00e3o \u00e9 verdade, pois tudo que o JavaScript oferece voc\u00ea pode ser usado dentro de um c\u00f3digo TypeScript e, na pr\u00e1tica, a sintaxe JS \u00e9 utilizada tamb\u00e9m.<\/p>\n\n\n\n

Por\u00e9m, o contr\u00e1rio n\u00e3o \u00e9 verdade, se optar por JavaScript, as funcionalidades inerentes ao TypeScript n\u00e3o poder\u00e3o ser utilizadas, como a tipagem forte, por exemplo.<\/p>\n\n\n\n

Essa \u00e9 uma das grandes vantagens da utiliza\u00e7\u00e3o do TypeScript:<\/strong> <\/p>\n\n\n\n

Os tipos nos fornecem uma maneira de descrever um objeto n\u00e3o s\u00f3 mais precisamente, gerando uma documenta\u00e7\u00e3o mais concisa, mas tamb\u00e9m uma valida\u00e7\u00e3o do c\u00f3digo em tempo de compila\u00e7\u00e3o.<\/p>\n\n\n\n

Vantagens do Typescript<\/h2>\n\n\n\n

A principal carater\u00edstica do TypeScript \u00e9 sua tipagem forte, raz\u00e3o pela qual leva no seu nome: type <\/em>quer dizer tipo. Mas tamb\u00e9m h\u00e1 outro aspecto, a Orienta\u00e7\u00e3o a Objetos<\/strong>.<\/p>\n\n\n\n

O JavaScript, na maior parte do seu projeto de linguagem, n\u00e3o \u00e9 tipado e a infer\u00eancia de tipo s\u00f3 vai at\u00e9 certo ponto. Da\u00ed uma necessidade maior de utilizar o TypeScript caso queira suprir essas defici\u00eancias.<\/p>\n\n\n\n

TypeScript: tipagem est\u00e1tica<\/h2>\n\n\n\n

No TypeScript, os tipos s\u00e3o inferidos de forma impl\u00edcita, mas tamb\u00e9m podemos explicitar o tipo. Por exemplo, no c\u00f3digo abaixo explicitamos que o tipo da vari\u00e1vel numeroQualquer<\/em> \u00e9 do tipo number<\/em>.<\/p>\n\n\n\n

let numeroQualquer: number;\nvalor = 10.5;\n<\/code><\/pre>\n\n\n\n
Devido a tipagem est\u00e1tica, se tentarmos atribuir um valor do tipo string ao atributo numeroQualquer, receberemos um erro.<\/p>\n\n\n\n
let valor: number;\nvalor = \u2018frase qualquer\u2019; \/\/ n\u00e3o \u00e9 v\u00e1lido\n<\/code><\/pre>\n\n\n\n
Vale ressaltar que o TypeScript n\u00e3o diferencia valores ponto flutuante (decimal) de valores inteiros. Todos s\u00e3o tratados como sendo do tipo number<\/em>.<\/p>\n\n\n\n
No exemplo acima, a tipagem \u00e9 expl\u00edcita. Mas o TypeScript realiza a infer\u00eancia de tipo. Por exemplo, no c\u00f3digo abaixo, quando atribu\u00edmos a string \u2018Carpe Diem\u2019 \u00e0 vari\u00e1vel fraseLegal<\/em>, implicitamente definimos que essa vari\u00e1vel \u00e9 do tipo string e, portanto, a linha de c\u00f3digo logo em seguida gerar\u00e1 um erro de compila\u00e7\u00e3o.<\/p>\n\n\n\n
let fraseLegal = \u2018Carpe Diem\u2019;\nfraseLegal = 98.5; \/\/ n\u00e3o \u00e9 v\u00e1lido a atribui\u00e7\u00e3o do tipo number para um tipo string.\n<\/code><\/pre>\n\n\n\n
Tutorial: linting em TypeScript com ESLint<\/a><\/p><\/blockquote>\n\n\n\n
Os tipos mais utilizados no TypeScript s\u00e3o:<\/h4>\n\n\n\n