Category: Frontend

TypeScript é uma linguagem fortemente tipada que adiciona tipos ao JavaScript, ajudando a evitar erros de tipagem e tornando o código mais fácil de manter. Neste tutorial, vamos explorar como tipar funções, objetos e classes em TypeScript.

1. Tipando Funções

No TypeScript, podemos definir o tipo de parâmetros e o tipo de retorno de uma função. Isso nos dá mais controle e segurança no código.

Sintaxe Básica:

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

Explicação:

• a: number e b: number tipam os parâmetros como números.
• : number após os parênteses indica que a função deve retornar um número.

Se tentarmos passar um argumento que não seja número, o TypeScript nos alertará sobre o erro.

Exemplo com Funções Anônimas:

const multiply = (x: number, y: number): number => {
  return x * y;
};

Aqui usamos a mesma lógica, mas com uma função anônima (arrow function).

Funções com Parâmetros Opcionais:

Às vezes, precisamos de parâmetros que não são obrigatórios. Para isso, usamos o símbolo ?.

function greet(name: string, age?: number): string {
  if (age) {
    return `Hello, ${name}. You are ${age} years old.`;
  }
  return `Hello, ${name}.`;
}

• age?: number torna o parâmetro age opcional.

2. Tipando Objetos

No TypeScript, podemos definir a estrutura de um objeto usando interfaces ou type aliases.

Usando type para Objetos:

type User = {
  name: string
  age: number
  isAdmin: boolean
}

const user: User = {
  name: "John",
  age: 30,
  isAdmin: true,
};

Explicação:

• Definimos o tipo User com três propriedades: name, age, e isAdmin.
• Quando criamos o objeto user, ele deve seguir essa estrutura.

Usando Interfaces:

Uma outra maneira de tipar objetos é através de interfaces. A vantagem é que podemos estender interfaces.

interface Car {
  model: string;
  year: number;
  isElectric: boolean;
}

const myCar: Car = {
  model: "Tesla Model S",
  year: 2021,
  isElectric: true,
};

As interfaces são muito semelhantes a type, mas podem ser mais flexíveis, especialmente ao trabalhar com herança.

3. Tipando Classes

Em TypeScript, as classes também podem ser tipadas de maneira robusta. Podemos definir os tipos de propriedades e métodos.

class Animal {
  name: string;
  age: number;

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

  speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal("Buddy", 3);
dog.speak(); // Output: Buddy makes a sound.

Explicação:

• As propriedades name e age são tipadas como string e number, respectivamente.
• O método speak não retorna nada (void).

4. Tipos Combinados e União

TypeScript permite criar tipos mais complexos usando uniões ou interseções.

União (Union):

Uma união permite que um valor tenha mais de um tipo.

function printId(id: number | string): void {
  console.log(`Your ID is: ${id}`);
}

printId(101);  // Válido
printId("202"); // Válido

Aqui, o parâmetro id pode ser um number ou string.

Interseção (Intersection):

Já a interseção combina vários tipos em um.

type Admin = {
  name: string;
  permissions: string[];
};

type Employee = {
  name: string;
  department: string;
};

type AdminEmployee = Admin & Employee;

const admin: AdminEmployee = {
  name: "Alice",
  permissions: ["edit", "delete"],
  department: "IT",
};

Neste exemplo, AdminEmployee combina as propriedades de Admin e Employee.

---

Conclusão

Neste guia, abordamos os fundamentos de como usar tipos em funções, objetos e classes em TypeScript. Usar tipos ajuda a garantir que o código esteja correto, fácil de manter e menos propenso a erros.

Resumo:

1. Tipar funções ajuda a evitar erros de parâmetro e retorno.
2. Tipar objetos garante que eles sigam uma estrutura específica.
3. Classes em TypeScript podem ser fortemente tipadas para facilitar o desenvolvimento.
4. Tipos avançados, como uniões e interseções, aumentam a flexibilidade e segurança do código.

Os arrays são uma das estruturas de dados mais importantes em JavaScript. Eles permitem armazenar listas de informações e, com os métodos certos, podemos manipular dados de forma simples e eficiente. Neste guia sobre manipulando arrays JavaScript, vamos explorar os métodos mais utilizados, sempre com exemplos práticos.

🔗 Saiba mais sobre arrays na documentação oficial do MDN.

---

1. map() — Transformando o array! 🛠️

O map() é ideal para transformar os elementos de um array em algo novo, mantendo o mesmo tamanho do array original. Imagine que você tem uma lista de números e quer dobrar cada um deles:

const numeros = [1, 2, 3, 4, 5];
const numerosDobrados = numeros.map(num => num * 2);

console.log(numerosDobrados); // [2, 4, 6, 8, 10]

💡 Dica: O map() não altera o array original. Ele cria um novo array!

---

2. filter() — Filtrando o que interessa! 🔍

Se você precisa filtrar elementos de um array com base em alguma condição, filter() é o método certo. Ele retorna um novo array contendo apenas os elementos que passam no teste da função.

const idades = [18, 21, 16, 30, 25];
const adultos = idades.filter(idade => idade >= 18);

console.log(adultos); // [18, 21, 30, 25]

🎯 Objetivo: Filtrar elementos que atendem a uma condição específica.

---

3. reduce() — Reduzindo para um valor só! 🧠

Quando você quer pegar todos os elementos de um array e reduzi-los a um único valor (como somar todos os números), reduce() é perfeito.

const precos = [10, 20, 30];
const total = precos.reduce((acumulado, precoAtual) => acumulado + precoAtual, 0);

console.log(total); // 60

📦 Legal, né? Agora você tem o total de todos os preços! 🎉

---

4. forEach() — Iterando com estilo! 🌀

O forEach() é útil quando você quer apenas iterar sobre o array e executar uma ação para cada elemento, sem retornar um novo array.

const frutas = ["🍎", "🍌", "🍇"];
frutas.forEach(fruta => {
  console.log(`Eu amo ${fruta}`);
});

🌟 Diferente do map(): O forEach() não retorna um novo array. Ele apenas percorre e executa algo em cada elemento.

---

5. find() — Procurando algo específico! 🕵️‍♂️

O find() retorna o primeiro elemento do array que satisfaz a condição fornecida. Se nenhum elemento for encontrado, retorna undefined.

const carros = ["Ferrari", "Tesla", "Fiat", "BMW"];
const carroLuxo = carros.find(carro => carro === "Ferrari");

console.log(carroLuxo); // Ferrari

---

Conclusão

Saber manipular arrays JavaScript é essencial para qualquer desenvolvedor. Com métodos como map, filter, reduce, forEach e find, você consegue trabalhar com listas de dados de forma eficiente e elegante.

Se quiser aprender mais, confira também nosso artigo sobre funções de ordem superior em JavaScript para aprofundar seu conhecimento.