Tutorial TypeScript: Introdução ao superconjunto JavaScript

A linguagem de programação TypeScript oferece uma série de funções adicionais ao JavaScript, que aprimoram o desenvolvimento de aplicações web. Este tutorial nada mais é que uma introdução ao TypeScript. Ele apresenta suas principais características (como a tipagem estática), a que projetos é mais adequado e discute seus principais prós e contras.

O que é TypeScript?

O TypeScript, desenvolvido pela Microsoft, é uma extensão da popular linguagem de programação JavaScript, amplamente utilizada no mundo do desenvolvimento web. A tipagem estática é a principal característica do TypeScript. Ao contrário do JavaScript, que possui uma tipagem dinâmica, o TypeScript permite a declaração de tipos de dados para variáveis, funções e parâmetros, o que facilita a detecção precoce de erros, antes mesmo do código ser executado. A tipagem estática, portanto, é capaz de melhorar significativamente a qualidade de códigos e aumentar a legibilidade destes.

A sintaxe do TypeScript é idêntica à do JavaScript, o que facilita a integração da linguagem de programação a projetos em JavaScript já em desenvolvimento. Na prática, o TypeScript é um superconjunto do JavaScript, ou seja, todo código JavaScript válido também é um código TypeScript válido. Assim, usuários podem alternar entre JavaScript e TypeScript sempre que desejarem, para aproveitar os benefícios que a tipagem estática oferece, assim como outros de seus recursos, sem precisar reescrever, por completo, o código existente.

Observe um exemplo de código simples, desenvolvido em JavaScript:

function greet(name) {
    return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"

Nesse código em JavaScript, a função greet não se restringe a um tipo de dado específico para o parâmetro name. Isso faz com que ela ainda seja executado sem a identificação do erro, mesmo se um número for utilizado como argumento, por exemplo.

Em TypeScript, o mesmo código poderia ser escrito assim:

function greet(name: string): string {
    return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScript

Nele, o parâmetro name é explicitamente declarado como uma cadeia de caracteres (string). Assim, se tentarmos chamar a função com um número, um erro será sinalizado, pois o tipo de dado passado não corresponde ao tipo de dado esperado.

O exemplo acima prova como o TypeScript pode ajudar na identificação precoce de erros, melhorando a qualidade dos códigos, pois ele impede a utilização de tipos de dados incorretos. Eventualmente, o TypeScript será compilado para JavaScript, fato que permite que ele seja executado em qualquer ambiente JavaScript. Por outro lado, isso significa que os benefícios do TypeScript só podem ser aproveitados durante fases de desenvolvimento.

Áreas de aplicação do TypeScript

O TypeScript tornou-se essencial em diferentes áreas do desenvolvimento de software, especialmente naquelas em que a segurança de tipos e a qualidade do código ganharam grande importância.

O TypeScript é bastante utilizado no desenvolvimento web, por exemplo. Essa linguagem de programação garante que códigos em JavaScript tornem-se mais seguros e fáceis de manter. Essas vantagens podem ser mais bem percebidas em grandes projetos de front-end, com códigos-fonte mais complexos. De toda forma, o TypeScript também pode ser implementado no lado do servidor (back-end), em aplicações Node.js, o que proporciona uma camada adicional de segurança. Em arquiteturas sem servidor (serverless), como a AWS Lambda e a Azure Functions, o TypeScript colabora com a minimização de erros, garantindo uma execução mais confiável.

O desenvolvimento multiplataforma constitui outra popular área de aplicação do TypeScript. Essa linguagem de programação mostra seu valor ao otimizar significativamente o desenvolvimento de aplicações multiplataforma, assim como de aplicativos móveis. Na programação de aplicativos móveis, frameworks como o NativeScript e o React Native oferecem suporte ao TypeScript para diferentes plataformas. No desenvolvimento de jogos, por sua vez, o TypeScript é utilizado em projetos que usam o WebGL ou motores de jogos, como o Phaser e o Babylon.js. Nessas situações, a segurança de tipos do TypeScript contribui para a melhora da qualidade dos jogos, assim como para a manutenção destes.

Para a visualização de dados e a análise de projetos, o TypeScript também é amplamente utilizado. Bibliotecas como D3.js oferecem suporte à linguagem de programação e permitem a criação de visualizações e dashboards sofisticados.

Como instalar o TypeScript

Agora que você já sabe do que se trata a linguagem de programação TypeScript, é hora de aprender como instalar o TypeScript com este tutorial. O processo é simples e requer apenas alguns passos, que serão detalhados a seguir. Você pode instalar o TypeScript pelo npm (Node Package Manager), se tiver Node.js instalado no seu computador.

Passo 1: Baixar o Node.js

Verifique se você já tem o Node.js instalado no seu computador. Se não for o caso, faça o download do software pelo site oficial do Node.js e siga com o processo de instalação do mesmo.

Passo 2: Instalar o TypeScript pelo terminal

Abra o terminal que você utiliza no seu computador (as linhas de comando do Linux e do macOS, por exemplo, ou o Prompt de Comando do Windows) e digite o seguinte comando para instalar o TypeScript de forma global:

npm install -g typescript

Ao fazer uso da opção -g (global), você instalará o TypeScript globalmente no seu sistema, o que permitirá que ele seja usado em qualquer lugar.

Passo 3: Visualizar a versão instalada

Você pode verificar se a instalação do TypeScript foi bem-sucedida executando o seguinte comando no terminal:

tsc -v

O comando acima exibirá a versão do TypeScript que foi instalada no seu computador. Assim, bastará que você visualize o número da versão do software para saber que a instalação foi bem-sucedida e está funcionando corretamente.

Logo que finalizar o processo de instalação, você poderá começar a criar arquivos no TypeScript (com a extensão .ts). Depois, bastará compilá-los usando o compilador próprio do TypeScript (tsc), para gerar arquivos em JavaScript.

Passo 4: Criar arquivo TypeScript

Para fins de teste, crie um arquivo TypeScript, por exemplo, app.ts, e insira um código TypeScript qualquer, para que seja executado. O exemplo abaixo pode guiar você:

type Person = { name: string, age: number };
const alice: Person = { name: "Alice", age: 30 };
console.log(`Hello, I am ${alice.name} and I am ${alice.age} years old.`);

Passo 5: Compilar o arquivo TypeScript

Depois de criar o arquivo que deseja, será a hora de compila-lo para JavaScript. Faça isso usando o comando:

tsc app.ts

Ele compilará o arquivo TypeScript que você criou (app.ts) para um arquivo JavaScript (aqui, de nome app.js). A partir deste momento, este mesmo arquivo poderá ser executado em JavaScript.

Recursos do TypeScript

O desenvolvimento web avançou significativamente nos últimos anos, tendo o TypeScript contribuído significativamente para o fato, por ser uma alternativa ao JavaScript com funcionalidades mais abrangentes. A seguir, este tutorial TypeScript listará os principais recursos do TypeScript com relação aos oferecidos pelo JavaScript.

Tipagem Estática

A tipagem estática é um aspecto essencial do TypeScript, pois ela permite que você especifique tipos de dados para variáveis, parâmetros, funções e outros elementos de um código. Ao contrário da tipagem dinâmica do JavaScript, na qual tipos de dados são determinados durante o tempo de execução, no TypeScript, tipos de dados são declarados durante o processo de desenvolvimento, ou seja, antes da execução do código. Funcionando dessa forma, os tipos de dados acabam por colaborar para a detecção precoce de erros e problemas lógicos, como você pode observar:

function add(a: number, b: number): number {
    return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type Error

No exemplo acima, aplicamos a tipagem estática à função add. Os dois parâmetros, a e b, foram declarados como números (number), fazendo com que a função também retornasse um valor do tipo number. A tentativa de se usar essa função com um tipo diferente de dado fez com que o TypeScript detectasse um erro.

Tipagem Opcional

A tipagem opcional permite que você se torne capaz de atribuir tipos de dados a variáveis e parâmetros específicos. Nesse caso, as demais variáveis e parâmetros permanecem sem tipagem definida, como mostra o exemplo:

function sayHello(name: string, age: any): string {
    if (age) {
        return `Hello, ${name}, you are ${age} years old.`;
    } else {
        return `Hello, ${name}.`;
    }
}

No código acima, a função sayHello foi definida com os parâmetros name e age. O tipo any, por sua vez, indica que o parâmetro age pode ser de qualquer tipo de dado.

Recursos ES6+

A linguagem de programação TypeScript suporta recursos modernos do JavaScript, que incluem o ES6, assim como outros mais recentes, como funções de seta (arrow funtions) e strings de modelo (template strings). O código abaixo exemplifica:

const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;

Como você pode perceber, funções de seta resultam em sintaxes mais curtas e concisas.

Organização do código

Por meio de módulos e namespaces, o TypeScript permite que códigos sejam mais bem organizados. Esses recursos também facilitam a divisão de códigos em partes reutilizáveis. Veja:

// Math.ts
export function add(a: number, b: number): number {
    return a + b;
}
// Main.ts
import { add } from './Math';
const result = add(5, 3);

No exemplo acima, organizamos um código de exemplo por meio de módulos e dos comandos import e export. A função add foi definida em um módulo separado, que recebeu o nome de Math.ts. Lá, ela é importada e utilizada em outro módulo, entilulado Main.ts.

Programação orientada a objetos (OOP)

O TypeScript contribui positivamente para a programação orientada a objetos (OOP), pois suporta o uso de classes TypeScript, de interfaces e de heranças:

class Person {
    constructor(public name: string, public age: number) {}
    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}
const person = new Person("Alice", 30);
person.greet();

O exemplo acima demonstra o uso de classes TypeScript e da programação orientada a objetos na linguagem de programação TypeScript. No código, a classe Person possui as propriedades name e age, além do método greet, responsável pela apresentação e pelo fornecimento informações sobre a pessoa.

Sistema de tipos avançado

O sistema de tipos do TypeScript é flexível e abrangente. Ele permite que você crie interfaces e tipos personalizados, e até mesmo que estenda os tipos existentes, como mostra o exemplo abaixo:

interface Animal {
    name: string;
}
interface Dog extends Animal {
    breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };

Como você pode observar, a interface Animal define a propriedade name, enquanto a interface Dog, herdada de Animal, adiciona uma propriedade a mais, de nome breed. O objeto myDog passa a possuir, assim, as características de ambas as interfaces.

Compatibilidade com JavaScript

O TypeScript é compatível com o JavaScript, podendo ser executado em qualquer ambiente JavaScript. Esse fato simplifica o processo de transição ao TypeScript de projetos que já existem em JavaScript, por torna-lo gradual.

// JavaScript-Code
function greet(name) {
    return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
    return "Hello, " + name;
}

No exemplo acima, perceba que o código JavaScript (sem tipagem) pode ser facilmente utilizado como código TypeScript (com tipagem).

Vantagens e desvantagens do TypeScript

O TypeScript oferece uma série de benefícios aos seus usuários, mas também tem pontos negativos, que devem ser considerados. Listamos, a seguir, os principais prós e contras dessa linguagem de programação:

Vantagens

O TypeScript possui um grande ecossistema de definições de tipos para variadas bibliotecas e frameworks JavaScript. O fato facilita a integração de códigos de terceiros a projetos TypeScript, de forma contínua e direta, sendo especialmente útil para aplicações web, que frequentemente dependem de múltiplas bibliotecas e frameworks.

Além da tipagem estática, o TypeScript oferece diversos outros recursos de desenvolvimento, como interfaces, classes, módulos e suporte aos padrões atuais do ECMAScript. Tais recursos melhoram a estrutura de códigos, facilitam a manutenção e a escalabilidade de projetos, e aumentam a produtividade dos desenvolvedores de os utilizam. O TypeScript também é amplamente suportado por ambientes de desenvolvimento integrados (IDEs), como o Visual Studio Code.

Desvantagens

O TypeScript requer que seus usuários se dediquem ao aprendizado da linguagem. Especialmente aqueles já acostumados a trabalhar com JavaScript precisam de um tempo para se adaptarem. Ainda, códigos em TypeScript precisam ser compilados para JavaScript antes de serem executados em navegadores ou ambientes Node.js, o que adiciona mais uma etapa ao processo de desenvolvimento.

Em projetos menores, o TypeScript pode vir a ser excessivamente complexo, pois os benefícios da segurança de tipos não são totalmente evidentes nesses casos. Projetos em TypeScript exigem mais recursos, devido a informações de tipo adicionais e ao passo extra de compilação.

Alternativas ao TypeScript

Várias linguagens de programação web oferecem recursos similares aos do TypeScript. A adoção de uma delas depende, contudo, dos requisitos específicos de cada projeto e da preferência de cada desenvolvedor. Conheça, abaixo, algumas alternativas ao TypeScript:

• Flow: Ferramenta de tipagem estática para JavaScript desenvolvida pelo Meta/Facebook. Ele permite a adição de tipos a códigos JavaScript, sem a necessidade de migração completamente para o TypeScript. O Flow pode ser uma boa escolha se você deseja integrar tipos em seus projetos JavaScript de forma gradual.

• Dart: Essa linguagem foi desenvolvida pelo Google, podendo ser usada para a criação de aplicações web e de aplicativos móveis. Entre suas vantagens estão segurança de tipos e bom desempenho. O Dart é frequentemente utilizado em conjunto com o framework Flutter no desenvolvimento de aplicativos móveis.

• PureScript: O PureScript é uma linguagem de programação funcional estritamente tipada, que dispõe de uma forte segurança de tipos, adotando um estilo de programação funcional. Ainda, ele permite a importação de bibliotecas JavaScript.

• Elm: Elm é uma linguagem funcional estritamente tipada, projetada para o desenvolvimento de aplicações web. Ela oferece um padrão arquitetural próprio, assim como alta segurança de tipos.

• ReasonML (BuckleScript): Desenvolvida pelo Facebook e baseada em OCaml, a linguagem ReasonML pode ser compilada para JavaScript pelo compilador BuckleScript. Ela oferece segurança de tipos e pode ser facilmente integrada ao React em desenvolvimentos front-end.