Tutorial Ty­peS­cript: In­tro­du­ção ao su­per­con­junto Ja­vaS­cript

A linguagem de pro­gra­ma­ção Ty­peS­cript oferece uma série de funções adi­ci­o­nais ao Ja­vaS­cript, que aprimoram o de­sen­vol­vi­mento de apli­ca­ções web. Este tutorial nada mais é que uma in­tro­du­ção ao Ty­peS­cript. Ele apresenta suas prin­ci­pais ca­rac­te­rís­ti­cas (como a tipagem estática), a que projetos é mais adequado e discute seus prin­ci­pais prós e contras.

O que é Ty­peS­cript?

O Ty­peS­cript, de­sen­vol­vido pela Microsoft, é uma extensão da popular linguagem de pro­gra­ma­ção Ja­vaS­cript, am­pla­mente utilizada no mundo do de­sen­vol­vi­mento web. A tipagem estática é a principal ca­rac­te­rís­tica do Ty­peS­cript. Ao contrário do Ja­vaS­cript, que possui uma tipagem dinâmica, o Ty­peS­cript permite a de­cla­ra­ção de tipos de dados para variáveis, funções e pa­râ­me­tros, o que facilita a detecção precoce de erros, antes mesmo do código ser executado. A tipagem estática, portanto, é capaz de melhorar sig­ni­fi­ca­ti­va­mente a qualidade de códigos e aumentar a le­gi­bi­li­dade destes.

A sintaxe do Ty­peS­cript é idêntica à do Ja­vaS­cript, o que facilita a in­te­gra­ção da linguagem de pro­gra­ma­ção a projetos em Ja­vaS­cript já em de­sen­vol­vi­mento. Na prática, o Ty­peS­cript é um su­per­con­junto do Ja­vaS­cript, ou seja, todo código Ja­vaS­cript válido também é um código Ty­peS­cript válido. Assim, usuários podem alternar entre Ja­vaS­cript e Ty­peS­cript sempre que desejarem, para apro­vei­tar os be­ne­fí­cios que a tipagem estática oferece, assim como outros de seus recursos, sem precisar re­es­cre­ver, por completo, o código existente.

Observe um exemplo de código simples, de­sen­vol­vido em Ja­vaS­cript:

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

Nesse código em Ja­vaS­cript, a função greet não se restringe a um tipo de dado es­pe­cí­fico para o parâmetro name. Isso faz com que ela ainda seja executado sem a iden­ti­fi­ca­ção do erro, mesmo se um número for utilizado como argumento, por exemplo.

Em Ty­peS­cript, 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 é ex­pli­ci­ta­mente declarado como uma cadeia de ca­rac­te­res (string). Assim, se tentarmos chamar a função com um número, um erro será si­na­li­zado, pois o tipo de dado passado não cor­res­ponde ao tipo de dado esperado.

O exemplo acima prova como o Ty­peS­cript pode ajudar na iden­ti­fi­ca­ção precoce de erros, me­lho­rando a qualidade dos códigos, pois ele impede a uti­li­za­ção de tipos de dados in­cor­re­tos. Even­tu­al­mente, o Ty­peS­cript será compilado para Ja­vaS­cript, fato que permite que ele seja executado em qualquer ambiente Ja­vaS­cript. Por outro lado, isso significa que os be­ne­fí­cios do Ty­peS­cript só podem ser apro­vei­ta­dos durante fases de de­sen­vol­vi­mento.

Áreas de aplicação do Ty­peS­cript

O Ty­peS­cript tornou-se essencial em di­fe­ren­tes áreas do de­sen­vol­vi­mento de software, es­pe­ci­al­mente naquelas em que a segurança de tipos e a qualidade do código ganharam grande im­por­tân­cia.

O Ty­peS­cript é bastante utilizado no de­sen­vol­vi­mento web, por exemplo. Essa linguagem de pro­gra­ma­ção garante que códigos em Ja­vaS­cript tornem-se mais seguros e fáceis de manter. Essas vantagens podem ser mais bem per­ce­bi­das em grandes projetos de front-end, com códigos-fonte mais complexos. De toda forma, o Ty­peS­cript também pode ser im­ple­men­tado no lado do servidor (back-end), em apli­ca­ções Node.js, o que pro­por­ci­ona uma camada adicional de segurança. Em ar­qui­te­tu­ras sem servidor (ser­ver­less), como a AWS Lambda e a Azure Functions, o Ty­peS­cript colabora com a mi­ni­mi­za­ção de erros, ga­ran­tindo uma execução mais confiável.

O de­sen­vol­vi­mento mul­ti­pla­ta­forma constitui outra popular área de aplicação do Ty­peS­cript. Essa linguagem de pro­gra­ma­ção mostra seu valor ao otimizar sig­ni­fi­ca­ti­va­mente o de­sen­vol­vi­mento de apli­ca­ções mul­ti­pla­ta­forma, assim como de apli­ca­ti­vos móveis. Na pro­gra­ma­ção de apli­ca­ti­vos móveis, fra­meworks como o Na­ti­veS­cript e o React Native oferecem suporte ao Ty­peS­cript para di­fe­ren­tes pla­ta­for­mas. No de­sen­vol­vi­mento de jogos, por sua vez, o Ty­peS­cript é 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 Ty­peS­cript contribui para a melhora da qualidade dos jogos, assim como para a ma­nu­ten­ção destes.

Para a vi­su­a­li­za­ção de dados e a análise de projetos, o Ty­peS­cript também é am­pla­mente utilizado. Bi­bli­o­te­cas como D3.js oferecem suporte à linguagem de pro­gra­ma­ção e permitem a criação de vi­su­a­li­za­ções e dash­bo­ards so­fis­ti­ca­dos.

Como instalar o Ty­peS­cript

Agora que você já sabe do que se trata a linguagem de pro­gra­ma­ção Ty­peS­cript, é hora de aprender como instalar o Ty­peS­cript com este tutorial. O processo é simples e requer apenas alguns passos, que serão de­ta­lha­dos a seguir. Você pode instalar o Ty­peS­cript pelo npm (Node Package Manager), se tiver Node.js instalado no seu com­pu­ta­dor.

Passo 1: Baixar o Node.js

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

Passo 2: Instalar o Ty­peS­cript pelo terminal

Abra o terminal que você utiliza no seu com­pu­ta­dor (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 Ty­peS­cript de forma global:

npm install -g typescript

Ao fazer uso da opção -g (global), você instalará o Ty­peS­cript glo­bal­mente no seu sistema, o que permitirá que ele seja usado em qualquer lugar.

Passo 3: Vi­su­a­li­zar a versão instalada

Você pode verificar se a ins­ta­la­ção do Ty­peS­cript foi bem-sucedida exe­cu­tando o seguinte comando no terminal:

tsc -v

O comando acima exibirá a versão do Ty­peS­cript que foi instalada no seu com­pu­ta­dor. Assim, bastará que você visualize o número da versão do software para saber que a ins­ta­la­ção foi bem-sucedida e está fun­ci­o­nando cor­re­ta­mente.

Logo que finalizar o processo de ins­ta­la­ção, você poderá começar a criar arquivos no Ty­peS­cript (com a extensão .ts). Depois, bastará compilá-los usando o com­pi­la­dor próprio do Ty­peS­cript (tsc), para gerar arquivos em Ja­vaS­cript.

Passo 4: Criar arquivo Ty­peS­cript

Para fins de teste, crie um arquivo Ty­peS­cript, por exemplo, app.ts, e insira um código Ty­peS­cript 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 Ty­peS­cript

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

tsc app.ts

Ele compilará o arquivo Ty­peS­cript que você criou (app.ts) para um arquivo Ja­vaS­cript (aqui, de nome app.js). A partir deste momento, este mesmo arquivo poderá ser executado em Ja­vaS­cript.

Recursos do Ty­peS­cript

O de­sen­vol­vi­mento web avançou sig­ni­fi­ca­ti­va­mente nos últimos anos, tendo o Ty­peS­cript con­tri­buído sig­ni­fi­ca­ti­va­mente para o fato, por ser uma al­ter­na­tiva ao Ja­vaS­cript com fun­ci­o­na­li­da­des mais abran­gen­tes. A seguir, este tutorial Ty­peS­cript listará os prin­ci­pais recursos do Ty­peS­cript com relação aos ofe­re­ci­dos pelo Ja­vaS­cript.

Tipagem Estática

A tipagem estática é um aspecto essencial do Ty­peS­cript, pois ela permite que você es­pe­ci­fi­que tipos de dados para variáveis, pa­râ­me­tros, funções e outros elementos de um código. Ao contrário da tipagem dinâmica do Ja­vaS­cript, na qual tipos de dados são de­ter­mi­na­dos durante o tempo de execução, no Ty­peS­cript, tipos de dados são de­cla­ra­dos durante o processo de de­sen­vol­vi­mento, ou seja, antes da execução do código. Fun­ci­o­nando 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 pa­râ­me­tros, a e b, foram de­cla­ra­dos como números (number), fazendo com que a função também re­tor­nasse um valor do tipo number. A tentativa de se usar essa função com um tipo diferente de dado fez com que o Ty­peS­cript de­tec­tasse um erro.

Tipagem Opcional

A tipagem opcional permite que você se torne capaz de atribuir tipos de dados a variáveis e pa­râ­me­tros es­pe­cí­fi­cos. Nesse caso, as demais variáveis e pa­râ­me­tros per­ma­ne­cem 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 pa­râ­me­tros 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 pro­gra­ma­ção Ty­peS­cript suporta recursos modernos do Ja­vaS­cript, 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 exem­pli­fica:

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.

Or­ga­ni­za­ção do código

Por meio de módulos e na­mes­pa­ces, o Ty­peS­cript permite que códigos sejam mais bem or­ga­ni­za­dos. Esses recursos também facilitam a divisão de códigos em partes reu­ti­li­zá­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, or­ga­ni­za­mos 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, en­ti­lu­lado Main.ts.

Pro­gra­ma­ção orientada a objetos (OOP)

O Ty­peS­cript contribui po­si­ti­va­mente para a pro­gra­ma­ção orientada a objetos (OOP), pois suporta o uso de classes Ty­peS­cript, de in­ter­fa­ces 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 Ty­peS­cript e da pro­gra­ma­ção orientada a objetos na linguagem de pro­gra­ma­ção Ty­peS­cript. No código, a classe Person possui as pro­pri­e­da­des name e age, além do método greet, res­pon­sá­vel pela apre­sen­ta­ção e pelo for­ne­ci­mento in­for­ma­ções sobre a pessoa.

Sistema de tipos avançado

O sistema de tipos do Ty­peS­cript é flexível e abran­gente. Ele permite que você crie in­ter­fa­ces e tipos per­so­na­li­za­dos, e até mesmo que estenda os tipos exis­ten­tes, 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 pro­pri­e­dade name, enquanto a interface Dog, herdada de Animal, adiciona uma pro­pri­e­dade a mais, de nome breed. O objeto myDog passa a possuir, assim, as ca­rac­te­rís­ti­cas de ambas as in­ter­fa­ces.

Com­pa­ti­bi­li­dade com Ja­vaS­cript

O Ty­peS­cript é com­pa­tí­vel com o Ja­vaS­cript, podendo ser executado em qualquer ambiente Ja­vaS­cript. Esse fato sim­pli­fica o processo de transição ao Ty­peS­cript de projetos que já existem em Ja­vaS­cript, 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 Ja­vaS­cript (sem tipagem) pode ser fa­cil­mente utilizado como código Ty­peS­cript (com tipagem).

Vantagens e des­van­ta­gens do Ty­peS­cript

O Ty­peS­cript oferece uma série de be­ne­fí­cios aos seus usuários, mas também tem pontos negativos, que devem ser con­si­de­ra­dos. Listamos, a seguir, os prin­ci­pais prós e contras dessa linguagem de pro­gra­ma­ção:

Vantagens

O Ty­peS­cript possui um grande ecos­sis­tema de de­fi­ni­ções de tipos para variadas bi­bli­o­te­cas e fra­meworks Ja­vaS­cript. O fato facilita a in­te­gra­ção de códigos de terceiros a projetos Ty­peS­cript, de forma contínua e direta, sendo es­pe­ci­al­mente útil para apli­ca­ções web, que fre­quen­te­mente dependem de múltiplas bi­bli­o­te­cas e fra­meworks.

Além da tipagem estática, o Ty­peS­cript oferece diversos outros recursos de de­sen­vol­vi­mento, como in­ter­fa­ces, classes, módulos e suporte aos padrões atuais do EC­MAS­cript. Tais recursos melhoram a estrutura de códigos, facilitam a ma­nu­ten­ção e a es­ca­la­bi­li­dade de projetos, e aumentam a pro­du­ti­vi­dade dos de­sen­vol­ve­do­res de os utilizam. O Ty­peS­cript também é am­pla­mente suportado por ambientes de de­sen­vol­vi­mento in­te­gra­dos (IDEs), como o Visual Studio Code.

Des­van­ta­gens

O Ty­peS­cript requer que seus usuários se dediquem ao apren­di­zado da linguagem. Es­pe­ci­al­mente aqueles já acos­tu­ma­dos a trabalhar com Ja­vaS­cript precisam de um tempo para se adaptarem. Ainda, códigos em Ty­peS­cript precisam ser com­pi­la­dos para Ja­vaS­cript antes de serem exe­cu­ta­dos em na­ve­ga­do­res ou ambientes Node.js, o que adiciona mais uma etapa ao processo de de­sen­vol­vi­mento.

Em projetos menores, o Ty­peS­cript pode vir a ser ex­ces­si­va­mente complexo, pois os be­ne­fí­cios da segurança de tipos não são to­tal­mente evidentes nesses casos. Projetos em Ty­peS­cript exigem mais recursos, devido a in­for­ma­ções de tipo adi­ci­o­nais e ao passo extra de com­pi­la­ção.

Al­ter­na­ti­vas ao Ty­peS­cript

Várias lin­gua­gens de pro­gra­ma­ção web oferecem recursos similares aos do Ty­peS­cript. A adoção de uma delas depende, contudo, dos re­qui­si­tos es­pe­cí­fi­cos de cada projeto e da pre­fe­rên­cia de cada de­sen­vol­ve­dor. Conheça, abaixo, algumas al­ter­na­ti­vas ao Ty­peS­cript:

• Flow: Fer­ra­menta de tipagem estática para Ja­vaS­cript de­sen­vol­vida pelo Meta/Facebook. Ele permite a adição de tipos a códigos Ja­vaS­cript, sem a ne­ces­si­dade de migração com­ple­ta­mente para o Ty­peS­cript. O Flow pode ser uma boa escolha se você deseja integrar tipos em seus projetos Ja­vaS­cript de forma gradual.

• Dart: Essa linguagem foi de­sen­vol­vida pelo Google, podendo ser usada para a criação de apli­ca­ções web e de apli­ca­ti­vos móveis. Entre suas vantagens estão segurança de tipos e bom de­sem­pe­nho. O Dart é fre­quen­te­mente utilizado em conjunto com o framework Flutter no de­sen­vol­vi­mento de apli­ca­ti­vos móveis.

• Pu­reS­cript: O Pu­reS­cript é uma linguagem de pro­gra­ma­ção funcional es­tri­ta­mente tipada, que dispõe de uma forte segurança de tipos, adotando um estilo de pro­gra­ma­ção funcional. Ainda, ele permite a im­por­ta­ção de bi­bli­o­te­cas Ja­vaS­cript.

• Elm: Elm é uma linguagem funcional es­tri­ta­mente tipada, projetada para o de­sen­vol­vi­mento de apli­ca­ções web. Ela oferece um padrão ar­qui­te­tu­ral próprio, assim como alta segurança de tipos.

• ReasonML (Buc­kleS­cript): De­sen­vol­vida pelo Facebook e baseada em OCaml, a linguagem ReasonML pode ser compilada para Ja­vaS­cript pelo com­pi­la­dor Buc­kleS­cript. Ela oferece segurança de tipos e pode ser fa­cil­mente integrada ao React em de­sen­vol­vi­men­tos front-end.