Aula 2 – Tipos no TypeScript: Primitivos, Arrays, Objetos e Inferência
Quando alguém começa a aprender TypeScript vindo do JavaScript, a primeira diferença perceptível é a presença de tipos. No JavaScript, você pode declarar uma variável e mudar o tipo dela a qualquer momento. Essa flexibilidade é útil em alguns casos, mas também pode gerar erros difíceis de detectar.
O TypeScript resolve isso com a tipagem estática, que permite definir o tipo de cada variável. Isso faz com que o editor de código e o compilador possam avisar quando algo está incorreto, antes mesmo de o programa rodar. Assim, o código se torna mais previsível e mais fácil de manter.
// Exemplo em JavaScript
let idade = 25;
idade = "vinte e cinco"; // Isso é permitido, mas pode causar erros
// Exemplo em TypeScript
let idadeTS: number = 25;
idadeTS = "vinte e cinco"; // Erro: não é possível atribuir uma string a um number
Ao forçar a consistência dos tipos, o TypeScript ajuda a identificar problemas ainda durante o desenvolvimento, economizando tempo de testes e depuração.
Então sem enrolação… BORA CODAR!!!
Tipos primitivos
Os tipos primitivos representam valores básicos, como textos, números e valores lógicos. Em TypeScript, os mais comuns são:
string, number, boolean, null e undefined.
let nome: string = "Guilherme";
let idade: number = 20;
let ativo: boolean = true;
let nulo: null = null;
let indefinido: undefined = undefined;
Nesse exemplo, cada variável tem um tipo específico. Se tentarmos atribuir um valor de tipo diferente, o TypeScript mostrará um erro.
nome = 10; // Erro: o valor deve ser do tipo string
idade = "vinte"; // Erro: o valor deve ser do tipo number
Também é possível deixar o TypeScript inferir o tipo automaticamente, quando o valor inicial deixa claro o tipo de dado:
let cidade = "Vitória"; // Inferido como string
let pontuacao = 42; // Inferido como number
Mesmo sem declarar o tipo, o TypeScript entende e mantém essa restrição. Se tentarmos mudar o tipo depois, o erro será identificado.
Arrays tipados
Arrays permitem armazenar vários valores em uma mesma variável. No TypeScript, é importante garantir que todos os elementos tenham o mesmo tipo.
let numeros: number[] = [1, 2, 3, 4, 5];
let nomes: string[] = ["Ana", "Bruno", "Carlos"];
O código acima declara dois arrays tipados: um de números e outro de strings.
Se tentarmos adicionar um tipo diferente, o compilador avisa:
numeros.push("seis"); // Erro: o array espera apenas números
Outra forma de declarar arrays é com a sintaxe Array<tipo>, que tem o mesmo efeito:
let pontuacoes: Array<number> = [10, 20, 30];
Essa verificação é útil para evitar erros ao percorrer ou manipular dados. Por exemplo:
for (let numero of numeros) {
console.log(numero * 2); // seguro, pois todos são numbers
}
Objetos tipados
Os objetos representam estruturas de dados com propriedades nomeadas. Em TypeScript, podemos definir o tipo esperado de cada propriedade.
let usuario: { nome: string; idade: number; ativo: boolean } = {
nome: "Guilherme",
idade: 20,
ativo: true
};
Nesse exemplo, o objeto usuario deve sempre ter as três propriedades indicadas com os respectivos tipos.
Se uma delas for omitida ou escrita incorretamente, o TypeScript exibirá um erro:
usuario = { nome: "Guilherme" }; // Erro: propriedades faltando
usuario.email = "gui@email.com"; // Erro: 'email' não existe em 'usuario'
Além disso, o TypeScript ajuda o editor a oferecer autocompletar para as propriedades, tornando a digitação mais produtiva.
Podemos também criar tipos personalizados para objetos que se repetem:
type Produto = {
nome: string;
preco: number;
disponivel: boolean;
};
let item: Produto = {
nome: "Teclado Mecânico",
preco: 250,
disponivel: true
};
Isso deixa o código mais limpo e facilita a reutilização de estruturas em diferentes partes do projeto.
Tipagem explícita e inferência de tipos
O TypeScript permite dois modos principais de declarar tipos: explícito e inferido.
Na tipagem explícita, o tipo é definido manualmente:
let linguagem: string = "TypeScript";
Isso é útil quando você quer deixar claro o tipo ou quando a variável ainda não tem valor inicial.
Na inferência de tipos, o TypeScript analisa o valor e deduz automaticamente o tipo:
let versao = 5.0; // Inferido como number
O compilador entende que versao é um número, então a linha abaixo geraria erro:
versao = "5.0"; // Erro: 'string' não é atribuível a 'number'
A inferência torna o código mais limpo e rápido de escrever, enquanto a tipagem explícita traz clareza quando o contexto não é óbvio.
Em projetos reais, é comum combinar as duas formas para equilibrar legibilidade e produtividade.
Vantagens da tipagem estática
A tipagem estática é o que diferencia o TypeScript do JavaScript tradicional.
Ela permite que o código seja verificado durante o desenvolvimento, e não apenas quando o programa é executado.
// Exemplo em JavaScript
function soma(a, b) {
return a + b;
}
soma(10, "5"); // Resultado: "105" — erro silencioso
No TypeScript, o mesmo código pode ser declarado com tipos explícitos:
function soma(a: number, b: number): number {
return a + b;
}
soma(10, "5"); // Erro: argumento deve ser do tipo number
Esse tipo de validação evita bugs sutis e melhora a produtividade.
Além disso, editores como VS Code oferecem sugestões automáticas e documentação contextual, tornando o desenvolvimento mais fluido.
Conclusão
Compreender os tipos em TypeScript é essencial para aproveitar sua principal vantagem: escrever código mais seguro e previsível.
Dominar os tipos primitivos, arrays e objetos tipados, além de entender a diferença entre tipagem explícita e inferência, ajuda a criar uma base sólida para projetos mais complexos.
A tipagem estática não é uma limitação, mas uma aliada. Ela ajuda o desenvolvedor a pensar de forma mais estruturada, reduz erros e facilita a manutenção do código ao longo do tempo.
Aprender TypeScript é um processo gradual, e dominar o sistema de tipos é um passo fundamental nessa jornada.
🔗https://github.com/guilherme-silvam/TS-aulas-guilhermemachadodev/tree/main/typescript-aula-2
Publicar comentário