TypeScript sem utilizar TypeScript

Análise Estática, Tipos e nenhuma etapa de compilação!

Image for post
Image for post
√Č TypeScript? √Č JavaScript? Um pouco dos dois!

**Atualização 19/Março/2018**

Fala pessoal ūüĎč, tudo bem? Depois de acompanhar o compartilhamento desse artigo atrav√©s das m√≠dias sociais. Parece que faltou explicar como usar o tsc pela linha de comando para analisar est√°ticamente arquivos .js . Alguns leitores at√© receberam respostas desagrad√°veis ao compartilhar esse artigo. Me sinto culpado por isso e, eu pe√ßo desculpa a voc√™, caro leitor, por ter recebido esse tipo de comportamento de indiv√≠duos da comunidade.

Abaixo, segue um repositório com exemplo de como usar tsc para analisar estáticamente arquivos .js , você não precisar só usar o VSCode, você só precisar entender como TypeScript funciona.

Image for post
Image for post
Usando a linha de comando do TypeScript para analisar arquivos JavaScript! ūüĒ•

A linguagem de programa√ß√£o criada pela Microsoft, TypeScript, traz muitas vantagens para o JavaScript, uma delas, √© a possibilidade de usar Tipos e An√°lise Est√°tica do seu c√≥digo. Embora ela n√£o enfor√ßa uma tipagem em tempo de execu√ß√£o, a an√°lise est√°tica √© bem rica, te d√° uma seguran√ßa a mais no seu c√≥digo e abre porta para integra√ß√Ķes em Editores e IDEs. TypeScript normalmente √© transpilado para JavaScript padr√£o, tornando poss√≠vel a execu√ß√£o nativa em Navegadores e Node.js. Por todos os seus atrativos e benef√≠cios, n√£o √© supresa que a ado√ß√£o do TypeScript est√° um uma velocidade bem r√°pida.

Claro, usar um dialeto de linguagem que n√£o √© padr√£o, tem seus contras. Usar TypeScript em um projeto introduz uma etapa de compila√ß√£o, tamb√©m em desenvolvimento, diminui a compatibilidade com o ecossistema de ferramentas existentes que s√£o projetadas para trabalhar com JavaScript e exige que todos os envolvidos, aprendam uma ‚Äúnova linguagem‚ÄĚ. Considerando o r√°pido desenvolvimento do JavaScript atualmente, existe alguns riscos em se ‚Äútrancar‚ÄĚ em um dialeto que n√£o √© padr√£o. Os criadores do TypeScript planejaram a linguagem e suas ferramentas para evitar alguns pot√™ncias problemas, mas ainda assim, n√£o √© puro JavaScript.

Felizmente, mesmo desenvolvendo com JavaScript puro, podemos obter as melhores partes. No TypeScript 2.3, que chegou em Abril, introduziu suporte para an√°lise de c√≥digo JavaScript convencional, que contenham certo tipo de anota√ß√£o com coment√°rios. Voc√™ pode usar uma sintaxe inspirada no JSDoc para descrever as assinaturas das suas fun√ß√Ķes e adicionar informa√ß√Ķes de tipos. As ferramentas do TypeScript ir√£o ler essas anota√ß√Ķes de tipo nos coment√°rios e us√°-las de uma maneira bem similar aos tipos nativos do TypeScript.

JavaScript com anota√ß√Ķes de tipos em coment√°rios n√£o √© como escrever TypeScript, mas, funciona em qualquer lugar, eliminando a necessidade de transpilar seu c√≥digo e, deixando o TypeScript como escolha opcional.

Essa op√ß√£o ainda n√£o cobre todos os casos como acontece em TypeScript, mas √© compreens√≠vel o suficiente para ser uma ferramenta bem √ļtil.

Um exemplo pr√°tico

Para usar a an√°lise est√°tica do TypeScript no JavaScript, voc√™ s√≥ precisa adicionar um coment√°rio com o texto @ts-check no come√ßo do seu arquivo. A seguir, adicione os coment√°rios no estilo JSDoc para suas anota√ß√Ķes de tipo do tipo TypeScript em qualquer lugar no seu arquivo. O exemplo a seguir demonstra como descrevemos a assinatura de uma fun√ß√£o, com um tipo de retorno e dois par√Ęmetros:

// @ts-check/**
* @param {number} a
* @param {number} b
* @return {number}
*/
function example(a, b) {
return a + b;
}

No Visual Studio Code, que tem suporte ao TypeScript por padr√£o, o editor ir√° automaticamente detectar esses coment√°rios e ir√° fazer o que voc√™ espera. N√£o existe configura√ß√£o ‚ÄĒ nem o t√≠pico arquivo de configura√ß√£o do TypeScript ‚ÄĒ apenas adicione esses coment√°rios em qualquer c√≥digo JavaScript. Se voc√™ tentar chamar a fun√ß√£o com par√Ęmetros diferentes dos tipos definidos, voc√™ receber√° um alerta:

Image for post
Image for post
Visual Studio Code é uma mão na roda!

O editor tamb√©m usa as anota√ß√Ķes para melhorar sua intelig√™ncia em outras funcionalidades, tais como, preenchimento autom√°tico. A an√°lise est√°tica funciona conforme o esperado entre arquivos porque TypeScript reconhece as declra√ß√Ķes ES6 imports e Node require.

Al√©m de anotar fun√ß√Ķes, voc√™ tamb√©m pode descrever a estrutura de um objeto. Isso √© particularmente √ļtil quando voc√™ quer o preenchimento autom√°tico e verifica√ß√£o do acesso de propriedade no JSON que voc√™ est√° buscando na API. O exemplo a seguir mostra como descrever uma estrutura JSON de uma API remota:

/**
* @typedef {Object} Issue
* @property {string} url
* @property {string} repository_url
* @property {id} number
* @property {string} title
* @property {string} state
* @property {bool} open
*/
const url = "https://api.github.com/repos/microsoft/typescript/issues";(async () => {
let response = await got(url, {json: true});

/** @type {Issue[]} */
let issues = response.body;
for (let issue of issues)
console.log(issue.title);
})();

O exemplo usa a anotação typedef para definir um tipo Issue. Dentro da IIFE assíncrona, onde temos a resposta da API do GitHub, estamos atribuindo o resultado a uma variável issues com uma anotação de tipo que indica que seu valor é um array do tipo Issue.

Voc√™ pode encontrar mais exemplos aqui, do estilo de anota√ß√Ķes JSDoc usado pelo TypeScript.

Suporte de bibliotecas

TypeScript carrega automaticamente informa√ß√Ķes de tipo para a biblioteca padr√£o do Node, ou seja, voc√™ recebe preenchimento autom√°tico e verifica√ß√£o de tipo para todas as APIs do Node. Para bibliotecas de terceiros que incluam defini√ß√Ķes TypeScript (geralmente com um arquivo .d.ts) nos pacotes npm. Utilizando o @ts-check no inicio do seu arquivo, tamb√©m ir√° carregar os arquivos e tipos exportados por aquela biblioteca.

Image for post
Image for post
Mesmo em JavaScript, você tem acesso as assinaturas das bibliotecas que você usa!

Conclus√£o

No ano passado, comecei a simplificar as ferramentas envolvidas no meu c√≥digo JavaScript, para tentar evitar a tend√™ncia de sempre aumentar a complexidade no desenvolvimento web moderno. Usando coment√°rios como anota√ß√Ķes de tipo, se alinha bem com essa abordagem: Eu recebo as vantagens do TypeScript, sem utilizar TypeScript em si, evitando qualquer etapa de compila√ß√£o durante o desenvolvimento. √Č como usar o TypeScript como um linter inteligente, ao inv√©s de uma linguagem de programa√ß√£o diferente. Voc√™ nem precisa adicionar TypeScript como uma dep√™ndencia do seu projeto, podendo muito bem, utilizar as funcionalidades do seu editor para escrever um c√≥digo melhor.

Créditos

Written by

‚ėēūüá≥ūüáŅ - https://eduardorabelo.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store