Autor: Thiago Gaelzer

O JavaScript é uma linguagem essencial para o desenvolvimento web moderno, porém, quando o projeto cresce, surgem desafios relacionados à escalabilidade e manutenibilidade do código. Foi nesse contexto que o TypeScript surgiu como uma poderosa ferramenta complementar.

Neste artigo, você vai entender o que é TypeScript, porque ele foi criado, quais são seus principais recursos e verá um exemplo prático de como utilizá-lo na construção de um contador de cliques. Se você já conhece JavaScript, prepare-se para dar um passo adiante na robustez do seu código!

1 – O que é TypeScript?

TypeScript é um superset do JavaScript. Um “superset” (ou superconjunto) é uma linguagem de programação que estende as funcionalidades de uma linguagem base, adicionando novas características sem alterar a funcionalidade original da linguagem base.

Na prática, isso significa que todo código JavaScript válido também é código TypeScript válido. Sendo um superset, o TypeScript adiciona algumas funcionalidades extras ao JavaScript que veremos a seguir:

• Tipagem Estática Opcional: Permite definir explicitamente os tipos de dados (como string, number, boolean, etc.) para variáveis, parâmetros de funções, retornos de funções e objetos. Essa tipagem é opcional, o que significa que você pode escolher quando e onde usá-la.
• Interfaces: Permitem definir contratos para a estrutura de objetos, especificando quais propriedades e métodos um objeto deve ter.
• Classes: Embora o JavaScript tenha classes desde o ECMAScript 2015, o TypeScript oferece um suporte mais robusto e familiar para quem vem de linguagens orientadas a objetos.
• Enums (Enumerações): Permitem definir um conjunto de constantes nomeadas, tornando o código mais legível e manutenível.
• Namespaces: Fornecem uma maneira de organizar o código e evitar conflitos de nomes em aplicações grandes.
• Generics: Permitem escrever código reutilizável que pode trabalhar com diferentes tipos sem perder a segurança de tipo.
• Ferramentas de Desenvolvimento: O TypeScript vem com um compilador (tsc) que verifica o código em busca de erros de tipo e o transpila para JavaScript. Ele também oferece um Language Service que melhora a experiência de desenvolvimento em editores de código com recursos como autocompletar, navegação de código e refatoração.

Em resumo, o TypeScript visa tornar o desenvolvimento JavaScript mais robusto, escalável e fácil de manter, especialmente para projetos grandes e complexos, através da adição de recursos como a tipagem estática e outros mais avançados.

2 – Como o TypeScript surgiu?

O TypeScript foi criado e é mantido pela Microsoft. Seu surgimento está diretamente ligado aos desafios enfrentados no desenvolvimento de aplicações JavaScript de grande escala.

No início dos anos 2010, o JavaScript estava se tornando cada vez mais popular para o desenvolvimento de aplicações web complexas. No entanto, sua natureza dinâmica e sem tipagem de dados, apresentava alguns problemas significativos:

• Dificuldade em detectar erros precocemente: Erros de tipo só eram descobertos em tempo de execução, o que poderia levar a bugs inesperados em produção.
• Manutenção complexa: Em projetos grandes, a falta de tipagem tornava difícil entender a estrutura do código e realizar refatorações com segurança.
• Escalabilidade limitada: A ausência de ferramentas robustas para organização e modularização dificultava o desenvolvimento de aplicações muito grandes.
• Experiência de desenvolvimento menos produtiva: A falta de informações de tipo dificultava o uso de recursos avançados de IDEs, como autocompletar e verificação de erros em tempo real.

Diante desses desafios, a Microsoft identificou a necessidade de criar uma linguagem que pudesse aproveitar a flexibilidade e o vasto ecossistema do JavaScript, ao mesmo tempo em que adicionava recursos para melhorar a produtividade e a qualidade do código em projetos maiores.

Anders Hejlsberg, um renomado engenheiro de software da Microsoft, liderou o desenvolvimento do TypeScript. O objetivo não era criar uma linguagem do zero, mas sim adicionar tipagem estática ao JavaScript, para uso imediato, especialmente, pelos times de desenvolvimento do TFS e Office.

A primeira versão pública do TypeScript foi lançada em outubro de 2012. Desde então, a linguagem vem ganhado uma enorme popularidade na comunidade de desenvolvimento web, sendo adotada em projetos de todos os tamanhos, desde pequenas bibliotecas até grandes aplicações empresariais. Sua compatibilidade com o JavaScript, a adoção de tipagem estática e outros recursos avançados foram fatores-chave para o seu sucesso.

3 – Exemplo prático com TypeScript

Assim como fiz no artigo sobre O que é JavaScript?, vamos ver um exemplo prático com TypeScript para reforçar nosso entendimento sobre o assunto.

O TypeScript é utilizado em conjunto com o HTML e o CSS para construção de páginas e aplicações web. Cada linguagem possui uma função específica:

– HTML: linguagem de marcação responsável pela estrutura das páginas e aplicações, definindo cabeçalhos, títulos, parágrafos e outros elementos.

– CSS: linguagem de folha de estilos responsável pela personalização do layout da página, definindo cores, fontes, posição dos elementos, entre outros atributos.

– TypeScript: linguagem de programação responsável pela interação da página, definindo ações ao clicar em botões, digitar textos em campos de input, entre outros.

Para nosso exemplo, iremos criar um contador de cliques igual do artigo O que é JavaScript? Vamos utilizar HTML, CSS e TypeScript no lugar de JavaScript neste exemplo.

Sugestão do autor: para um melhor entendimento das diferenças entre o JavaScript e o TypeScript, recomendo que você analise atenciosamente os códigos dos dois artigos. Lembre-se que se trata do mesmo exemplo, um contador de cliques, mudando apenas a linguagem utilizada em sua construção.

3.1 – Criando os arquivos e configurando o ambiente

Para nosso contador de cliques, vamos criar três arquivos: index.html, styles.css e counter.ts. Observe a estrutura abaixo:

Além de criar os arquivos acima, certifique-se de que você tem o TypeScript instalado em seu sistema operacional. Caso você ainda não tiver o TypeScript instalado, acesse esse link e siga as orientações.

Lembre-se que todo código TypeScript precisa ser transpilado para JavaScript. Por isso, antes de instalar o TypeScript, certifique-se que você possui em sua máquina, o Node JS e um gerenciador de dependências como o npm ou yarn. Se precisar de ajuda para instalar o Node e o gerenciador de dependências, consulte esse link aqui.

3.2 – Criando os códigos

Após criar os arquivos acima e instalar o Node, um gerenciador de dependências e o TypeScript, vamos criar os códigos, começando pelo arquivo index.html:

<!DOCTYPE html>

<html lang="pt-BR">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
        <script defer type="text/javascript" src="./scripts/counter.js"></script>
        <title>Contador com TypeScript</title>
    </head>

    <body>
        <div class="container">
            <div class="titulo">
                <h1>Contador: <span id="counter">0</span></h1>
            </div>
            <div class="botoes">
                <button id="increment">+</button>
                <button id="decrement">-</button>
            </div>
        </div>
    </body>
</html>

Em nosso código HTML, definimos no <body> um contador e dois botões: um para somar cliques e outro para subtrair os cliques. Além disso, no <head> passamos alguns metadados da página, definindo um título e referenciando dois arquivos: styles.css, onde estão os estilos da página e counter.ts, onde está a lógica de funcionamento do contador.

Agora, vamos criar o código de styles.css:

.container {
    display: flex;
    justify-content: center;
    height: 95vh;
    flex-direction: column;

}

.titulo, .botoes {
    width: 99vw;
    text-align: center;
    color: #222;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
}

#counter {
    display: inline-block;
    min-width: 60px;
    font-size: 2.2rem;
    text-align: left;
}

button {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: #0068de;
    color: white;
    margin-right: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: #0277fd;
    transform: scale(1.1);
}

button:active {
    transform: scale(0.9);
}

Repare que no código CSS acima, definimos a posição, tamanho e estilos de cada elemento da página. A aplicação do CSS leva ao resultado abaixo, com o contador centralizado na tela e os botões estilizados com visual simples e agradável:

Agora vamos criar o código de counter.ts, para configurar as ações do contador de cliques:

// Seleciona os elementos do HTML com verificação de null
const counter = document.getElementById("counter") as HTMLElement | null;
const incrementBtn = document.getElementById("increment") as HTMLButtonElement | null;
const decrementBtn = document.getElementById("decrement") as HTMLButtonElement | null;

// Variável que armazena o valor do contador
let count: number = 0;

// Função para atualizar o contador na tela
function updateCounter(): void {
  if (counter) {
    counter.textContent = count.toString();
  }
}

// Função que soma cliques ao contador 
incrementBtn?.addEventListener("click", () => {
  count++;
  updateCounter();
});

// Função que subtrai cliques no contador 
decrementBtn?.addEventListener("click", () => {
  count--;
  updateCounter();
});

O código TypeScript possui a lógica de acréscimo e subtração de valores no contador. Vamos analisar o código:

– Seleciona os elementos do documento HTML usando document.getElementById(), especificando o tipo de elemento HTML onde será o valor será capturado.

– Define uma variável count, do tipo number, para armazenar o valor do contador.

– Cria uma função updateCounter() para atualizar o valor do contador na tela.

– Adiciona duas funções de callback addEventListener() aos botões para detectar cliques e atualizar o contador.

3.3 – Executando o projeto

Agora vamos executar nosso projeto. Antes de fazer isso, precisamos observar um detalhe muito importante do TypeScript. Talvez você tenha observado em nosso documento HTML que estamos fazendo referência para um arquivo JavaScript, chamado counter.js em nosso head e não para o arquivo counter.ts

<script defer type="text/javascript" src="./scripts/counter.js"></script>

Isso acontece porque os navegadores web não executam código TypeScript. Antes de executar nosso projeto precisamos transpilar nosso código para JavaScript, gerando o arquivo counter.js. Para transpilar o código, vamos acessar a pasta scripts via terminal utilizando:

cd scripts

Em seguida, vamos executar o seguinte comando:

tsc counter.ts

Pronto, ao executar o comando acima, será gerado um arquivo chamado counter.js, que pode ser executado em qualquer navegador web.

Agora vamos abrir o arquivo index.html e obteremos o seguinte resultado:

Veja que, a linguagem TypeScript utilizada com HTML e CSS, permite criar aplicações e páginas web funcionais de forma simples e eficiente. O TypeScript representa uma nova ferramenta de desenvolvimento web que possui grande potencial de agregar novas funcionalidades e recursos aprimorados. Não deixe de estudar e explorar essa nova linguagem.

Conclusão

O TypeScript surge como uma evolução natural para quem já domina o JavaScript e busca mais segurança, organização e produtividade no desenvolvimento de aplicações web. Seu sistema de tipagem estática, junto com recursos como interfaces, enums e generics, proporciona uma experiência muito mais robusta, especialmente em projetos de grande porte.

O exemplo do contador de cliques mostrou como é simples integrar TypeScript com HTML e CSS para criar interfaces interativas e modernas. Ao dominar essa linguagem, você se prepara para encarar desafios mais complexos com mais confiança e controle sobre o seu código.

Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.