|
| 1 | +--- |
| 2 | +title: TypeScript para o Novo Programados |
| 3 | +short: TS para o Novo Programador |
| 4 | +layout: docs |
| 5 | +permalink: /pt/docs/handbook/typescript-from-scratch.html |
| 6 | +oneline: Aprenda TypeScript do zero |
| 7 | +--- |
| 8 | + |
| 9 | +Parabéns por escolher TypeScript como uma das suas primeiras linguagens - você já está fazendo boas decisões! |
| 10 | + |
| 11 | +Você provavelmente já deve ter ouvido que TypeScript é um "sabor" ou uma "variante" do JavaScript. O relacionamento entre TypeScript (TS) e JavaScript (JS) é único entre linguagens de programação modernas, então aprender mais sobre esse relacionamento vai te ajudar a entender como TypeScript soma ao JavaScript. |
| 12 | + |
| 13 | +## O Que é JavaScript? Uma Breve História |
| 14 | + |
| 15 | +JavaScript (também conhecido como ECMAScript) começou sua vida como uma lingaugem de script simples para navegadores. Na época em que foi inventada, sempre foi esperado que fosse usada para pequenos snippets de código embarcados em uma página web - escrevendo mais do que uma dúzia de linhas de código seria algo incomum. Por isso, navegadores jovens da época executavam tal código bem devagar. Entretanto, com o tempo, JS se tornou mais e mais popular e desenvolvedores web começaram a usar ele para criar experiências interativas. |
| 16 | + |
| 17 | +Desenvolvedores de navegadores web responderam a esse uso aumentado de JS otimizando seus motores de execução (compilação dinâmica) e extendendo o que poderia ser feito com ele (adicionando APIs), o que por sua vez fez os desenvolvedores web o usarem ainda mais. Em websites modernos, seu browser frequentemente está rodando aplicações que têm centenas de milhares de linhas de código. Esse é o crescimento longo e gradual da "web", começando como uma rede simples de páginas estáticas e evoluindo em uma plataforma para _aplicações_ ricas de todos os tipos. |
| 18 | + |
| 19 | +Mais do que isso, JS se tornou popular o suficiente para ser usado fora do contexto de navegadores, como a implementação de servidores JS usando node.js. A natureza de "rodar em qualquer lugar" do JS faz ele ser uma escolha atrativa para desenvolvimento multiplataforma. Há muitos desenvolvedores nesses dias que usam _apenas_ JavaScript para programar toda seu conjunto de aplicações! |
| 20 | + |
| 21 | +Para resumir, nós temos uma linguagem que foi desenvolvida para usos rápidos e então cresceu para uma ferramenta completa para escrever aplicações com milhões de linhas. Toda linguagem tem suas próprias _individualidades_ - uniquicidades e surpresas e o começo humilde do JavaScript faz com que ele tenha _muitas_ dessas. Alguns exemplos: |
| 22 | + |
| 23 | +- O operador de igualidade do JavaScript (`==`) _coage_ seus argumentos, levando a comportamento inesperado: |
| 24 | + |
| 25 | + ```js |
| 26 | + if ('' == 0) { |
| 27 | + // É! mas porque?? |
| 28 | + } |
| 29 | + if (1 < x < 3) { |
| 30 | + // Verdadeiro para qualquer valor de x! |
| 31 | + } |
| 32 | + ``` |
| 33 | + |
| 34 | +- JavaScript também permite acessar propriedades que não estão presentes: |
| 35 | + |
| 36 | + ```js |
| 37 | + const obj = { width: 10, height: 15 }; |
| 38 | + // Porque isso é NaN? Ortografia é difícil! |
| 39 | + const area = obj.width * obj.heigth; |
| 40 | + ``` |
| 41 | + |
| 42 | +A maioria das linguagens de programação lançariam um erro quando esse tipo de situação ocorresse, algumas fariam isso em tempo de compilação - antes de qualquer código estar sendo executado. Quando escrevendo programas pequenos, tais individualidades são irritantes mas gerenciáveis; quando escrevendo aplicações com centenas ou milhares de linhas de código, essas surpresas constantes são um problema sério. |
| 43 | + |
| 44 | +## TypeScript: Um Verificador de Tipos Estáticos |
| 45 | + |
| 46 | +Nós dissemos antes que algumas linguagens não permitiriam esses programas bugados nem serem executados. Detecção de erros sem execução do código é chamada de _verificação estática_. Determinar o que é um erro e o que não é baseado nos tipos dos valores sendo operados é chamado de verificação estática de _tipos_. |
| 47 | + |
| 48 | +TypeScript verifica um programa por erros antes de sua execução e faz isso baseado nos _tipos dos valores_, é um _verificador de tipo estático_. Por exemplo, o último exemplo acima tem um erro por causa do _tipo_ de `obj`. Aqui está o erro que o TypeScript encontra: |
| 49 | + |
| 50 | +```ts twoslash |
| 51 | +// @errors: 2551 |
| 52 | +const obj = { width: 10, height: 15 }; |
| 53 | +const area = obj.width * obj.heigth; |
| 54 | +``` |
| 55 | + |
| 56 | +### Um Superconjunto Tipado de JavaScript |
| 57 | + |
| 58 | +Como TypeScript se realaciona com JavaScript então? |
| 59 | + |
| 60 | +#### Sintaxe |
| 61 | + |
| 62 | +TypeScript é uma linguagem que é um _superconjunto_ de JavaScript: sintaxe JS é, logo, válida em TS. Sintaxe se refere à forma que escrevemos texto para formar um programa. Por exemplo, este código tem um erro de _sintaxe_ porque falta um `)`: |
| 63 | + |
| 64 | +```ts twoslash |
| 65 | +// @errors: 1005 |
| 66 | +let a = (4 |
| 67 | +``` |
| 68 | +
|
| 69 | +TypeScript não considera qualquer código JavaScript como um erro por sua sintaxe. Isso significa que você pode pegar qualquer código funcional JavaScript e colocar em um arquivo TypeScript sem se preocupar em como está escrito. |
| 70 | +
|
| 71 | +#### Tipos |
| 72 | +
|
| 73 | +Entretanto, TypeScript é um superconjunto _tipado_, significando que adiciona regras sobre como diferentes tipos de valores podem ser usados. O erro anterior sobre `obj.heigth` não era um erro de _sintaxe_: é um erro de uso de um tipo de valor (um _tipo_) de uma maneira incorreta. |
| 74 | +
|
| 75 | +Como outro exemplo, isso é um código JavaScript que você pode rodar no seu browser e ele _vai_ exibir um valor: |
| 76 | +
|
| 77 | +```js |
| 78 | +console.log(4 / []); |
| 79 | +``` |
| 80 | +
|
| 81 | +Este programa sintaticamente legal exibe `Infinity`. TypeScript por sua vez considera a divisão de um número por um array uma operação sem sentido e vai exibir um erro: |
| 82 | +
|
| 83 | +```ts twoslash |
| 84 | +// @errors: 2363 |
| 85 | +console.log(4 / []); |
| 86 | +``` |
| 87 | +
|
| 88 | +É possível que você realmente _queira_ dividir um núemro po rum array, talvez só para ver o que acontece, mas na maior parte do tempo isso é um erro de programação. O verificador de tipo do TypeScript é desenvolvido para permitir programas corretos enquanto previne quantos erros comuns forem possíveis. (Mais tarde, aprenderemos sobre configurações que você pode usar para configurar quão estritamente o TypeScript verifica seu código.) |
| 89 | +
|
| 90 | +Se você move algum código de um arquivo JavaScript para um arquivo TypeScript, você pode ver _erros de tipo_ dependendo de como o código é escrito. Esses podem ser problemas legítimos com o código ou TypeScript sendo conservador em excesso. Por meio deste guia nós vamos demonstrar como adicionar várias sintaxes do TypeScript para eliminar tais erros. |
| 91 | +
|
| 92 | +#### Comportamento em Tempo de Execução |
| 93 | +
|
| 94 | +TypeScript também é uma linguagem de programação que preserva o _comportamento de tempo de execução_ do JavaScript. Por exemplo, dividir por zero em JavaScript produz `Infinity` ao invés de lançar um erro em tempo de execução. Como um princípio, o TypeScript **nunca** muda o comporatmento de tempo de execução de código JavaScript. |
| 95 | +
|
| 96 | +Isso significa que você mover código do JavaScript do TypeScript, é **garantido** que vai rodar da mesma forma mesmo que o TypeScript pensa que o código tem erros de tipos. |
| 97 | +
|
| 98 | +Mantendo o mesmo comportamento em tempo de execução que o JavaScript é uma promessa fundamental do TypeScript porque significa que você pode facilmente transitar entre duas linguagens sem se preocupar com diferenças sutis que podem fazer seu programa parar de funcionar. |
| 99 | +
|
| 100 | +<!-- |
| 101 | +Subseção removida sobre o fato de que TS extende o JS para adicionar sintaxe de especificação de tipo. (Já que o texto anterior já fala sobre como código JS pode ser usado em TS.) |
| 102 | +--> |
| 103 | +
|
| 104 | +#### Tipos Apagados |
| 105 | +
|
| 106 | +A grosso modo, uma vez que o compilador do TypeScript terminou de verificar o seu código, ele _apaga_ os tipos para produzir o código resultante "compilado". Isso significa que uma vez que seu código for compilado, o código JS puro de resultado não tem informação de tipo. |
| 107 | +
|
| 108 | +Isso também significa que o TypeScript nunca muda o _comportamento_ do seu programa baseado nos tipos que infere. O fim disso é que enquanto você vê erros de tipo durante a compilação, o sistema de tipos em si não tem influência sobre como seu programa funciona quando roda. |
| 109 | +
|
| 110 | +Finalmente, TypeScript não fornece nenhuma biblioteca de tempo de execução adicional. Seus programas vão usar as mesmas bibliotecas padrão (ou externas) que os programas JavaScript, então não há ferramentas específicas do TypeScript adicionais para se aprender. |
| 111 | +
|
| 112 | +<!-- |
| 113 | +Deveria extender este parágrafo para dizer que há uma exceção de permitir que você use novas funcionalidades do JS e transpilar o código para um JS mais antigo e isso pode adicionar alguns contratempos de funcionalidades quando necessário. (Talvez com um exemplo --- algo como `?.` seria bom em mostrar aos leitores que este documento é mantido.) |
| 114 | +--> |
| 115 | +
|
| 116 | +## Aprendendo JavaScript e TypeScript |
| 117 | +
|
| 118 | +Nós frequentemente vemos a questão "Eu deveria aprender JavaScript ou TypeScript?". |
| 119 | +
|
| 120 | +A resposta é que vocẽ não pode aprender TypeScript sem aprender JavaScript! TypeScript compartilha sintaxe e comportamento de tempo de execução com JavaScript, então qualquer coisa que você queira aprender sobre JavaScript estará ajudando você a aprender TypeScript ao mesmo tempo. |
| 121 | +
|
| 122 | +Hà muitos, muitos recursos disponíveis para programadores aprenderem JavaScript; você _não_ deveria ignorar estes recursos se você está escrevendo TypeScript. Por exemplo, há cerca de 20 vezes mais questões no StackOverflow marcadas com `javascript` do que com `typescript`, mas _todas_ as questões `javascript` também se aplicam ao TypeScript. |
| 123 | +
|
| 124 | +Se você se encontra procurando por algo como "como organizar uma lista em TypeScript", lembre-se: **TypeSript é o ambiente de execução do JavaScript com verificador de tipo em tempo de compilação**. A forma com que você organiza uma lista em TypeScript é a mesma no JavaScript. Se você encontrar um recurso que usa TypeScript diretamente isso é ótimo também, mas não se limite a pensar que você precisa de respostas específicas do TypeScript para questões do dia a dia sobre como alcançar tarefas do ambiente de execução. |
| 125 | +
|
| 126 | +## Próximos Passos |
| 127 | +
|
| 128 | +Esse foi um pequeno resumo da sintaxe e ferramentas usadas no TypeScript no dia-a-dia. Daqui, você pode: |
| 129 | +
|
| 130 | +- Aprender alguns fundamentos do JavaScript, nós recomendamos: |
| 131 | +
|
| 132 | + - [Microsoft's JavaScript Resources](https://docs.microsoft.com/javascript/) or |
| 133 | + - [JavaScript guide at the Mozilla Web Docs](https://developer.mozilla.org/docs/Web/JavaScript/Guide) |
| 134 | +
|
| 135 | +- Continuar para [TypeScript para programadores JavaScript](/docs/handbook/typescript-in-5-minutes.html) |
| 136 | +- Ler o Handbook completo [from start to finish](/docs/handbook/intro.html) (30m) |
| 137 | +- Explorar os [exemplos do Playground](/play#show-examples) |
| 138 | +
|
| 139 | +<!-- Nota: Estaria feliz em escrever sobre os seguintes... --> |
| 140 | +<!-- |
| 141 | +## Tipos |
| 142 | +
|
| 143 | + * O que é um tipo? (For newbies) |
| 144 | + * Um tipo é um *formato* de um valor |
| 145 | + * Tipos definem implicitamente quais operadores fazem sentido para eles |
| 146 | + * Muitos formatos diferentes, não só primitivos |
| 147 | + * Nós podemos fazer descrições para todos os formatos de valores |
| 148 | + * O tipo `any` -- uma descrição rápida, o que é e porque é ruim |
| 149 | + * Inferência Básica |
| 150 | + * Exemplos |
| 151 | + * TypeScript pode descobrir tipos na maior parte do tempo |
| 152 | + * Dois lugares onde vamos te perguntar o tipo são: Parâmetros de funções e valores inicializados tardiamente |
| 153 | + * Co-aprendendo JavaScript |
| 154 | + * Você pode+deve ler recursos JS existentes |
| 155 | + * Apenas cole e veja o que acontece |
| 156 | + * Considere desligar o modo 'strict' --> |
0 commit comments