4 minutos de leitura
O TypeScript é um superset do JavaScript que fornece principalmente tipagem estática opcional, classes e interfaces. Um dos grandes benefícios é permitir que para detectar erros comuns à medida que escrevemos nosso código.
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Contudo, o navegador não entende TypeScript e para que nosso código seja um código válido, ele precisa ser compilado para JavaScript. São os arquivos resultantes da compilação que são importados pelo navegador. Frameworks como Angular e Ionic utilizam TypeScript como linguagem padrão.
Agora que já temos uma visão geral sobre esta poderosa linguagem, vejamos um simples exemplo que prepara o terreno do tópico abordado neste post:
let nome: string = 'Flávio'; nome = 12; // ```ts
Type '12' is not assignable to type 'string'.
TypeScript é ainda capaz de inferir o tipo, sem a necessidade de indicá-lo:
let nome = 'Flávio'; // inferiu o tipo string nome = 12; // ```ts
Type '12' is not assignable to type 'string'.
Além disso, a linguagem traz por padrão type definitions para funções e API's do DOM, permitindo que a IDE detecte erros de sintaxe em nosso código ao usarmos esses recursos, inclusive fornecendo autocomplete:
Mas como proceder para utilizarmos bibliotecas de terceiros que não foram criadas com TypeScript?
Podemos pegar como exemplo o jQuery, uma das bibliotecas mais populares e que ainda invade o coletivo imaginário dos desenvolvedores. Contudo, se tentarmos usar o global $ em nosso código, teremos um erro de compilação do TypeScript:
let elemento = $('p'); // ```ts
Cannot find name '
#39;
O erro de compilação ocorre porque o TypeScript não entende que $ é uma variável do escopo global e definida pelo jQuery. Faz todo sentido, porque para o TypeScript variáveis não declaradas podem resultar em erros em nosso programa. E agora?
Uma solução para "calar a boca" do compilador e deixar nosso código compilar é a seguinte:
declare var $: any; let elemento = $('p'); // deixou o compilador feliz
No entanto, essa solução só deve ser usada em último caso, pois apesar de ter silenciado o compilador, a variável $ foi definida como o tipo any. Como o próprio tipo já indica, o valor da variável pode ser qualquer coisa e o TypeScript não saberá se os métodos e atribuições feitas com ela são válidos. Sendo assim, a solução que vimos tira um dos grandes benefícios da linguagem.
A boa notícia é que mesmo o jQuery não sendo uma biblioteca criada com TypeScript, é possível criar seu type definition, mais ainda, ele pode ser disponibilizado pelo autor da biblioteca ou por terceiros.
Neste caso, para que possamos tipar a variável $ com o tipo JQuery e nos beneficiarmos do autocomplete e checagem estática do TypeScript podemos baixar seu type definition através do comando:
npm install @types/jquery --save-dev
Como o compilador do TypeScript depende do Node.js para funcionar, temos acesso ao npm, seu gerenciador de pacotes. Por padrão, o compilador TypeScript procura essas definições baixadas dentro da pasta node_modules, local no qual o type definition que acabamos de baixar estará disponível.
Agora, podemos reescrever nosso código assim, sem o declare var:
let elemento = $('select'); // TypeScript infere o tipo JQuery
Ou se for a propriedade de uma classe:
class Controller {
private elemento: JQuery; // definindo o tipo!
constructor() {
this.elemento = $('select'); /\* se fizermos this.elemento, teremos acesso à todas as funções do jQuery, inclusive validação dos tipos de parâmetros \*/ } }
Baixar o definition type da sua biblioteca favorita é um caminho mais adequado do que simplesmente silenciar o compilador com declare var. No entanto, pode ser que existam mais de uma definição criada por diferentes autores e cabe ao desenvolvedor baixar aquela mais atualizada, o que requererá uma verificação detalhada de sua parte.
Por fim, há o repositório DefinitelyTyped que centraliza vários typings, quem sabe aquele da sua biblioteca preferida existe lá, ou, caso não exista em nenhum lugar, que tal contribuir com a comunidade sendo o primeiro a criar sua type definition?
Avalie este artigo
Prática: Evite influenciar estimativas: estime até mesmo as histórias mais simples
Ler maisRetrospectiva Caelum 2012
Ler mais
Marketing de Relacionamento: o que é e como aplicar
Ler mais