TypeScript: uma introdução à extensão do JavaScript
O TypeScript oferece uma série de funções que melhoram significativamente o desenvolvimento de aplicações web. Este tutorial do TypeScript fornece uma introdução à linguagem de programação com explicações sobre as características, utilizações, vantagens e desvantagens mais importantes.
O que é TypeScript?
O TypeScript foi desenvolvido pela Microsoft e é uma extensão do JavaScript muito utilizada no desenvolvimento web. Uma das suas principais características é a tipagem estática. Ao contrário do JavaScript, que tem tipagem dinâmica, no TypeScript é possível declarar tipos de dados para variáveis, funções e parâmetros, o que ajuda a detetar erros antecipadamente, mesmo antes de executar o código. Isto melhora significativamente a qualidade do código e, ao mesmo tempo, aumenta a sua legibilidade.
A sintaxe do TypeScript é muito semelhante à do JavaScript, o que facilita a integração em projetos JavaScript existentes. Na verdade, o TypeScript é um superconjunto do JavaScript, portanto, qualquer código JavaScript válido também é código TypeScript válido. Isso permite que migre gradualmente para o TypeScript e aproveite as vantagens da tipagem estática e outros recursos sem precisar reescrever completamente a sua base de código.
Este é um exemplo simples de JavaScript:
function greet(name) {
return "Hello, " + name;
}
console.log(greet(123)); // Output: "Hello, 123"Neste código JavaScript, a função greet não está limitada a um tipo de dados específico para o parâmetro name, pelo que a função pode ser chamada sem erros, mesmo que seja passado um número como argumento.
Em TypeScript, o código tem a seguinte sintaxe:
function greet(name: string): string {
return "Hello, " + name;
}
console.log(greet(123)); // Error in TypeScriptAqui, declaramos explicitamente o parâmetro name como uma string. Se agora chamarmos a função com um número, o TypeScript exibirá um erro, pois o tipo de dados passado não corresponde ao tipo de dados esperado.
Este exemplo mostra como o TypeScript ajuda a detetar erros antecipadamente e a aumentar a qualidade do código, evitando o uso de tipos de dados incorretos. No entanto, é importante ter em conta que o TypeScript é compilado em última instância para JavaScript e pode ser executado em qualquer ambiente JavaScript, pelo que os benefícios da segurança de tipos só são utilizados durante o desenvolvimento.
As aplicações do TypeScript
O TypeScript desempenha um papel fundamental em várias aplicações de desenvolvimento de software, especialmente em situações em que a segurança dos tipos e a qualidade do código são decisivas.
Uma área importante de aplicação do TypeScript é o desenvolvimento web. Nela, ele garante que o código JavaScript escrito seja mais seguro e fácil de manter, o que é uma vantagem em projetos front-end extensos, nos quais a base de código é complexa. No entanto, o TypeScript também pode ser implementado no lado do servidor (back-end) em aplicações Node.js para fornecer uma camada adicional de segurança. Em arquiteturas sem servidor, como AWS Lambda e Azure Functions, o TypeScript ajuda a minimizar erros e garantir uma boa execução.
O TypeScript também traz muitos benefícios no âmbito do desenvolvimento multiplataforma, pois pode otimizar significativamente o desenvolvimento de aplicações multiplataforma e aplicações móveis. Frameworks como NativeScript e React Native oferecem suporte para TypeScript na programação de aplicações móveis para diversas plataformas. No desenvolvimento de jogos, o TypeScript é utilizado em projetos que utilizam WebGL ou motores de jogos como Phaser ou Babylon.js. A sua segurança tipográfica ajuda a melhorar a qualidade e a facilidade de manutenção dos jogos.
O TypeScript também é utilizado em projetos de visualização e análise de dados. Bibliotecas como D3.js oferecem suporte para TypeScript, permitindo a criação de painéis e visualizações sofisticadas.
Como se instala o TypeScript?
Instalar o TypeScript é muito fácil e basta seguir alguns passos. Se tiver o Node.js instalado no seu computador, pode instalar o TypeScript utilizando npm (Node Package Manager).
Passo 1. Descarregar o Node.js
Verifique se tem o Node.js instalado no seu computador. Se ainda não o tiver, pode descarregá-lo e instalá-lo a partir do site oficial.
Passo 2. Instalar o TypeScript no terminal
Abra a janela de comandos do seu sistema operativo (por exemplo, o sistema de comandos do Windows, o Terminal no macOS ou Linux) e introduza o seguinte comando para instalar o TypeScript globalmente.
npm install -g typescriptA opção -g (global) indica que o TypeScript será instalado em todo o seu sistema, para que você possa usá-lo em qualquer lugar.
Passo 3. Mostrar a versão instalada
Execute este comando para verificar se a instalação foi realizada corretamente:
tsc -vEste comando mostra a versão instalada do TypeScript. Se você vir o número da versão, significa que a instalação foi realizada corretamente.
Após a instalação, pode criar ficheiros TypeScript (com a extensão .ts) e compilá-los com o compilador TypeScript tsc para gerar ficheiros JavaScript.
Passo 4. Criar ficheiros TypeScript
Crie um ficheiro TypeScript, por exemplo app.ts, e insira o seu código TypeScript.
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 ficheiros
Compile o ficheiro TypeScript introduzindo o seguinte comando:
tsc app.tsDesta forma, compila app.ts num ficheiro JavaScript com o nome app.js. Depois, pode executar o ficheiro JavaScript.
Características do TypeScript
O desenvolvimento web tem experimentado um grande avanço nos últimos anos e o TypeScript surgiu como uma alternativa poderosa ao JavaScript. A seguir, resumimos as suas características mais importantes.
Tipificação estática
A tipagem estática é um aspeto essencial do TypeScript e refere-se à definição de tipos de dados para variáveis, parâmetros, funções e outros elementos do seu código. Ao contrário da tipagem dinâmica em JavaScript, onde os tipos de dados são determinados em tempo de execução, no TypeScript os tipos de dados são declarados durante o desenvolvimento, antes da execução do código. Portanto, os tipos ajudam a reconhecer erros e problemas lógicos antecipadamente.
function add(a: number, b: number): number {
return a + b;
}
const result = add(5, 3); // valid
const result = add(5, "3"); // Type ErrorNeste exemplo, utiliza-se a tipagem estática para a função add. Os dois parâmetros a e b são declarados como números (number), e a função retorna um valor do tipo number. Ou seja, se tentar chamar esta função com outros tipos de dados, o TypeScript detectará essas tentativas como erros.
Tipificação opcional
Com a tipagem opcional, é possível atribuir tipos a determinadas variáveis e parâmetros, enquanto outros permanecem sem tipagem explícita.
function sayHello(name: string, age: any): string {
if (age) {
return `Hello, ${name}, you are ${age} years old.`;
} else {
return `Hello, ${name}.`;
}
}A função sayHello é definida com os parâmetros name e age. O tipo any indica que o parâmetro age pode aceitar qualquer tipo de dado.
Funções ES6+
O TypeScript é compatível com as funcionalidades modernas do JavaScript, incluindo ES6 e outras mais recentes, como funções de seta e strings de modelo.
const multiply = (a: number, b: number): number => a * b;
const greeting = (name: string) => `Hello, ${name}!`;As funções flecha (arrow functions em inglês) permitem uma sintaxe mais curta e concisa.
Organização do código
Graças aos módulos e espaços de nomes, o TypeScript oferece uma melhor organização do código e garante que este seja dividido em partes reutilizáveis.
// 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 anterior, a organização do código é ilustrada com a ajuda de módulos e o uso de import e export. A função add é definida num módulo separado Math.ts e é importada e instalada noutro módulo Main.ts.
Programação orientada a objetos (POO)
O TypeScript simplifica a programação orientada a objetos, permitindo o uso de classes TypeScript, interfaces e herança.
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();Este exemplo mostra como usar classes e programação orientada a objetos (OOP) em TypeScript. A classe Person tem as propriedades name, age e um método greet para se apresentar e fornecer informações sobre si mesma.
Sistema de taxas ampliado
O sistema de tipos do TypeScript é flexível e extenso. É possível criar tipos e interfaces definidos pelo utilizador e até mesmo ampliar tipos existentes.
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const myDog: Dog = { name: "Buddy", breed: "Labrador" };A interface Animal define uma propriedade name, enquanto a interface Dog (cão) herda de Animal e adiciona uma propriedade adicional breed (raça). O objeto myDog (o meu cão) tem as características de ambas as interfaces.
Compatibilidade com JavaScript
O TypeScript é compatível com JavaScript e pode ser executado em qualquer ambiente JavaScript, o que facilita a sua integração gradual em projetos JavaScript existentes.
// JavaScript-Code
function greet(name) {
return "Hello, " + name;
}
// TypeScript-Code
function greet(name: string): string {
return "Hello, " + name;
}O código JavaScript (sem tipagem) pode ser utilizado num código TypeScript (com tipagem) sem qualquer problema.
Vantagens e desvantagens do TypeScript
O TypeScript oferece uma série de vantagens, mas também tem algumas desvantagens. A seguir, apresentamos um resumo dos argumentos a favor e contra o superconjunto.
Vantagens
O TypeScript possui um amplo ecossistema de definições de tipos para muitas bibliotecas e frameworks JavaScript. Isso facilita a integração de código de terceiros em projetos TypeScript, o que é muito útil no mundo atual das aplicações web, que muitas vezes dependem de várias bibliotecas e frameworks.
Além da tipagem estática, o TypeScript oferece uma variedade de recursos de desenvolvimento, incluindo interfaces, classes, módulos e suporte aos padrões atuais do ECMAScript. Esses recursos melhoram a estrutura do código, facilitam a manutenção e a escalabilidade dos projetos e aumentam a produtividade durante o desenvolvimento. O TypeScript também é compatível com muitos ambientes de desenvolvimento integrado (IDE), como o Visual Studio Code.
Desvantagens
O TypeScript requer um período inicial de aprendizagem, especialmente para programadores que só trabalharam com JavaScript. O seu código deve ser compilado para JavaScript antes de ser executado em navegadores ou ambientes Node.js, o que adiciona mais uma etapa ao processo de desenvolvimento.
Em projetos menores, o TypeScript pode parecer excessivamente complexo, pois os benefícios da segurança de tipos podem não ser tão evidentes. Devido às informações adicionais sobre tipos e à etapa de compilação, os projetos em TypeScript podem exigir mais recursos.
Alternativas ao TypeScript
Existem várias linguagens de programação web como alternativa ao TypeScript, cuja utilização dependerá das exigências do projeto e das preferências dos programadores.
- Flow: é um tipo estático para JavaScript desenvolvido pelo Facebook. Permite adicionar tipos ao código JavaScript sem ter que fazer uma mudança completa para TypeScript e é uma boa opção se quiser integrar gradualmente a tipagem nos seus projetos JavaScript.
- Dart: é uma linguagem de programação desenvolvida pelo Google com a qual é possível criar aplicações web e aplicações móveis. Oferece segurança tipográfica e um bom desempenho e é frequentemente utilizada em combinação com a estrutura Flutter para desenvolver aplicações móveis.
- PureScript: é uma linguagem de programação funcional estritamente tipada que inclui uma forte segurança de tipos. Permite incorporar bibliotecas JavaScript.
- Elm: é uma linguagem funcional estritamente tipada para desenvolver aplicações web. Promove o padrão da arquitetura Elm e possui um alto nível de segurança de tipos.
- ReasonML (BuckleScript): é uma linguagem desenvolvida pelo Facebook e baseada em Ocaml que compila para JavaScript. Além disso, fornece segurança de tipos e uma forte integração com React para o desenvolvimento frontend.
Se quiser aprofundar estes temas, consulte os artigos funções TypeScript e matrizes TypeScript.