Aprendendo TypeScript: O que é e como usar em projetos?

O que é TypeScript? Como usar? 🚀

TypeScript é uma linguagem de programação open-source desenvolvida pela Microsoft, lançada em 2012. Ela é um superset de JavaScript, ou seja, é uma linguagem que estende o JavaScript adicionando novas funcionalidades e recursos, mas mantém a compatibilidade com a sintaxe e semântica do JavaScript. O objetivo do TypeScript é tornar o desenvolvimento de aplicativos em JavaScript mais fácil e seguro, adicionando recursos como tipagem estática, interfaces, classes, entre outros.

Neste artigo, vamos entender mais sobre o que é o TypeScript e como usá-lo em seus projetos, com vários exemplos práticos.

Tipagem Estática em TypeScript 📋

Uma das principais características do TypeScript é a tipagem estática. Isso significa que podemos declarar os tipos das variáveis, funções e parâmetros, definindo quais valores são permitidos e quais não são. Isso torna o código mais seguro e menos propenso a erros, já que o compilador verifica se as operações estão sendo feitas com os tipos corretos.

// Exemplo de declaração de tipos
let name: string = "John"; // string
let age: number = 30; // number
let isStudent: boolean = true; // boolean

No exemplo acima, declaramos as variáveis `name`, `age` e `isStudent`, definindo os tipos `string`, `number` e `boolean`, respectivamente.

Interfaces em TypeScript 📝

As interfaces em TypeScript são uma forma de definir a estrutura de um objeto, especificando os nomes e tipos das propriedades que o objeto deve ter. Isso é útil para garantir que os objetos tenham uma estrutura consistente e para facilitar a leitura e manutenção do código.

// Exemplo de interface
interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

// Criando um objeto com base na interface
let person: Person = {
  name: "John",
  age: 30,
  isStudent: true
};

No exemplo acima, criamos a interface `Person`, que define as propriedades `name`, `age` e `isStudent`. Em seguida, criamos um objeto `person` com base nessa interface.

Classes em TypeScript 👥

As classes em TypeScript são uma forma de definir objetos com métodos e propriedades. Isso torna o código mais organizado e reutilizável, permitindo a criação de instâncias de objetos com comportamentos e propriedades específicas.

// Exemplo de classe
class Person {
  name: string;
  age: number;
  isStudent: boolean;

  constructor(name: string, age: number, isStudent: boolean) {
    this.name = name;
    this.age = age;
    this.isStudent = isStudent;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

// Criando uma instância da classe
let person = new Person("John", 30, true);
person.sayHello(); // Hello, my name is John.

No exemplo acima, criamos a classe `Person`, que possui as propriedades `name`, `age` e `isStudent`, e o método `sayHello()`. Em seguida, criamos uma instância da classe com os parâmetros "John", ## Variáveis

No TypeScript, assim como no JavaScript, as variáveis podem ser declaradas usando `var`, `let` e `const`. No entanto, o TypeScript adiciona um novo tipo de variável chamado `tuple`. As tuples são arrays com um número fixo de elementos que representam diferentes tipos de dados. Veja um exemplo:

let tupla: [string, number];
tupla = ["exemplo", 123];

Funções

As funções em TypeScript podem ter tipos de retorno explícitos, bem como tipos de parâmetros. Veja um exemplo de uma função que recebe dois parâmetros do tipo `number` e retorna um `number`:

function soma(a: number, b: number): number {
  return a + b;
}

Além disso, as funções em TypeScript também suportam parâmetros opcionais e parâmetros padrão. Veja um exemplo:

function saudacao(nome: string, sobrenome?: string, titulo: string = "Sr."): string {
  let mensagem = `Olá, ${titulo} ${nome}`;
  if (sobrenome) {
    mensagem += ` ${sobrenome}`;
  }
  return mensagem;
}
console.log(saudacao("João")); 
// "Olá, Sr. João"
console.log(saudacao("Maria", "Silva")); 
// "Olá, Sr. Maria Silva"
console.log(saudacao("Pedro", "Ferreira", "Dr.")); 
// "Olá, Dr. Pedro Ferreira"

Classes

As classes em TypeScript são muito semelhantes às classes em outras linguagens orientadas a objetos, como Java ou C#. Elas suportam herança, interfaces, modificadores de acesso e métodos estáticos. Veja um exemplo de classe em TypeScript:

class Pessoa {
  nome: string;
  idade: number;

  constructor(nome: string, idade: number) {
    this.nome = nome;
    this.idade = idade;
  }

  saudacao(): string {
    return `Olá, meu nome é ${this.nome} e eu tenho ${this.idade} anos.`;
  }
}

let pessoa1 = new Pessoa("João", 30);
console.log(pessoa1.saudacao()); // "Olá, meu nome é João e eu tenho 30 anos."

Interfaces

As interfaces em TypeScript são usadas para descrever a forma de um objeto. Elas não são implementadas diretamente em uma classe, mas podem ser usadas como um tipo de dados para especificar o formato de um objeto. Veja um exemplo de uma interface em TypeScript:

interface IPessoa {
  nome: string;
  idade: number;
  saudacao(): string;
}

class Pessoa implements IPessoa {
  nome: string;
  idade: number;

  constructor(nome: string, idade: number) {
    this.nome = nome;
    this.idade = idade;
  }

  saudacao(): string {
    return `Olá, meu nome é ${this.nome} e eu tenho ${this.idade} anos.`;
  }
}

let pessoa1: IPessoa = new Pessoa("João", 30);
console.log(pessoa1.saudacao()); // "Olá, meu nome é João e eu tenho 30 anos."

Conclusão 📚

O TypeScript é uma linguagem de programação que adiciona recursos de tipagem estática ao JavaScript. Isso ajuda a evitar erros comuns de programação e aumenta a segurança do código. Além disso, o TypeScript fornece recursos avançados, como interfaces e tipos genéricos, que facilitam a criação de código robusto e escalável. Outra vantagem do TypeScript é que ele é compatível com o ecossistema JavaScript existente, permitindo que os desenvolvedores aproveitem as bibliotecas e estruturas de código-fonte aberto disponíveis. No geral, o TypeScript é uma excelente escolha para desenvolvedores que desejam criar aplicativos web mais confiáveis e fáceis de manter.