TypeScript: O que é, como funciona e como usar

Introdução

O TypeScript é uma linguagem de programação open source desenvolvida pela Microsoft que adiciona recursos adicionais ao JavaScript. Ele é um superconjunto tipado do JavaScript, ou seja, adiciona tipagem estática e outros recursos ao JS.

O TypeScript traz vários benefícios, como:

• Detecção de erros em tempo de desenvolvimento (ao invés de em tempo de execução)
• Autocompletar de código
• Facilidade na refatoração
• Mais produtividade e menos bugs

Assuntos abordados:

• O que é o TypeScript e suas principais características
• Por que e quando utilizar o TypeScript
• Como instalar e configurar o TypeScript nos seus projetos
• O que é tipagem e como ela funciona no TS
• Como criar seus próprios tipos no TS
• Programação Orientada a Objetos com TS
• Um pouco sobre programação funcional com TS

O que é TypeScript

O TypeScript é uma linguagem de programação desenvolvida pela Microsoft que adiciona tipagem estática ao JavaScript.

O JS é uma linguagem dinâmica e não tipada, o que pode trazer problemas para projetos muito grandes e com muitos desenvolvedores, pois fica difícil de entender e modificar trechos de código escritos por outras pessoas.

O TypeScript veio para resolver esse problema, adicionando tipagem ao JS. Dessa forma, as variáveis passam a ter um tipo definido, como string, number, boolean, etc.

Além da tipagem estática, o TS adiciona outros recursos ao JS como classes, interfaces, generics e outras features orientadas a objetos.

O código TypeScript precisa ser compilado para JavaScript para poder ser executado nos browsers e ambientes Node.js, pois os ambientes JS não entendem TS diretamente.

Por que e quando utilizar TypeScript

O TypeScript traz diversos benefícios para o desenvolvimento, especialmente em projetos grandes e com muitos desenvolvedores envolvidos.

Alguns motivos para utilizar TS:

• Maior produtividade: A tipagem e recursos adicionais como autocompletar de código e refatoração facilitam e agilizam o desenvolvimento.

• Menos bugs: Muitos bugs podem ser detectados durante a compilação, antes mesmo de executar o código. Isso aumenta a qualidade do software.

• Código mais legível: A tipagem deixa o código autoexplicativo, facilitando a leitura e manutenção no futuro.

• ** Mais segurança:** A tipagem rigorosa evita muitos erros comuns de JavaScript.

• Suporte a OO e FP: TypeScript adiciona recursos de programação orientada a objetos como classes e interfaces. Também suporta programação funcional.

• Interoperabilidade com JS: Todo código JS funciona em TS. Além disso, é possível incorporar TS gradualmente em projetos JS existentes.

O TypeScript é recomendado para projetos grandes, com muito código e vários desenvolvedores envolvidos. Porém, nada impede de utilizá-lo também em projetos menores para se beneficiar da tipagem estática e produtividade.

Como instalar e configurar o TypeScript

Para começar a utilizar o TypeScript, primeiro você precisa ter o Node.js instalado na sua máquina.

Feito isso, basta instalar o TypeScript de forma global com o NPM:

npm install -g typescript

Para compilar arquivos TS para JS, podemos utilizar o comando tsc:

tsc nome-do-arquivo.ts

Isso vai gerar um arquivo nome-do-arquivo.js com o código JS equivalente.

Também é possível fazer com que a compilação seja automática sempre que salvarmos um arquivo TS. Para isso, inicializamos um projeto TS com:

tsc --init

Isso cria um arquivo tsconfig.json com as configurações do projeto. Nele, podemos habilitar a opção "watch": true para que a compilação seja automática.

Dessa forma, sempre que salvarmos um arquivo TS, o código será automaticamente compilado para JS!

O que é tipagem e como funciona no TS

A tipagem estática é um dos recursos mais importantes do TypeScript. Enquanto o JS é dinamicamente tipado, o TS adiciona tipos estáticos.

Isso significa que precisamos explicitamente definir quais são os tipos das nossas variáveis, parâmetros de função, retorno de funções, etc.

Os principais tipos nativos do TS são:

• number: para números. Ex: let idade: number = 28;

• string: para strings. Ex: let nome: string = "João";

• boolean: para valores booleanos true/false.

• any: para valores dinâmicos, sem um tipo específico. Equivale a não ter tipagem.

• void: para funções que não retornam nada.

• never: para funções que não finalizam sua execução.

• object: para objetos em geral.

• array: para arrays. Ex: let list: number[] = [1, 2, 3];

Além desses tipos básicos, também é possível criar enums, interfaces e tipos personalizados, como veremos mais adiante.

A grande vantagem da tipagem estática é a possibilidade de detectar erros durante o desenvolvimento. Por exemplo, se tentarmos atribuir uma string para uma variável numérica, o TS vai acusar erro antes mesmo de executar a aplicação.

Isso evita muitos bugs e problemas em potencial.

Criando tipos personalizados

Além dos tipos embutidos do TS como number, string, boolean, etc, também é possível criar nossos próprios tipos personalizados.

Isso é muito útil para representar objetos e formatos de dados específicos dentro da nossa aplicação.

Por exemplo, podemos criar um tipo para representar um usuário com nome e idade:

type Usuario = {  nome: string;  idade: number; }function saudar(usuario: Usuario) {  console.log("Olá " + usuario.nome); }const joao: Usuario = {  nome: "João",  idade: 30}saudar(joao); // Olá João

Perceba que criamos um tipo Usuario representando um objeto JS com nome e idade. Depois, usamos esse tipo como parâmetro e retorno de função.

Os tipos personalizados dão muito mais significado e contexto para o nosso código.

Programação Orientada a Objetos

O TypeScript adiciona suporte completo para Programação Orientada a Objetos, incluindo classes, interfaces, herança, modificadores de acesso e muito mais.

Por exemplo, podemos definir uma classe Pessoa:

class Pessoa {  private nome: string;  public idade: number;  constructor(nome: string, idade: number) {    this.nome = nome;    this.idade = idade;  }    saudar() {    console.log("Olá, meu nome é " + this.nome);    }}const joao = new Pessoa("João", 30);joao.saudar();

Note que temos características de OO como classe, atributos privados e públicos, construtor e métodos.

Também é possível herdar classes umas das outras, implementar interfaces, utilizar modificadores de acesso como public e private, getters/setters, static types e muito mais.

Programação Funcional

O TypeScript também adiciona alguns recursos para programação funcional, como funções de primeira classe que podem ser atribuídas a variáveis e passadas por parâmetro, arrow functions, imutabilidade de dados, etc.

Por exemplo:

function soma(a: number, b: number) {  return a + b; }let funcSoma = soma;console.log(funcSoma(10, 20)); // 30

Perceba que a função soma foi atribuída para uma variável funcSoma, e depois foi chamada normalmente.

Também podemos passar funções por parâmetro para outras funções:

function executarFunc(fn: (a: number, b: number) => number) {  let resultado = fn(10, 5)  console.log(resultado);}executarFunc(soma); // 15

O TypeScript tem suporte limitado para recursos mais avançados de programação funcional como currying, composição, functors, monads etc. Para esses casos, é comum utilizar bibliotecas externas como RamdaJS.