DEV Community: Marcelo

Tipos básicos do TypeScript - Parte 2

Marcelo — Thu, 09 Oct 2025 15:32:30 +0000

Dando continuidade ao artigo anterior - Tipos básicos do TypeScript - Parte 1 (um ano depois! rsrs) - vamos explorar type aliases, interfaces, literal types e outros conceitos para fortalecer ainda mais sua base em TypeScript!

Tabela de conteúdos

Type aliases
Interfaces
Type assertions
Literal types
Null e undefined
Enums
Primitivos menos comuns
Conclusão

Type aliases

Lá atrás, no nosso primeiro artigo, usávamos os object types (tipos de objeto) e union types da seguinte maneira:

function showUser(user: { name: string, surname: string }) {
    console.log(`Nome: ${user.name}`);
    console.log(`Sobrenome: ${user.surname}`);
}

showUser({ name: 'Marcelo', surname: 'Sarinho' });

Nesse caso, não tem nenhum problema. Mas e se você precisasse escrever o tipo do parâmetro user várias vezes? Isso seria muito repetitivo e estressante (e ninguém merece digitar tipos enormes toda hora, né?). Para isso, temos os type aliases: um nome para os tipos!

Portanto, o código anterior poderia ser reescrito da seguinte maneira:

type User = {
    name: string;
    surname: string;
}

function showUser(user: User) {
    console.log(`Nome: ${user.name}`);
    console.log(`Sobrenome: ${user.surname}`);
}

showUser({ name: 'Marcelo', surname: 'Sarinho' });

Podemos usar o type alias para qualquer tipo, inclusive union types:

type Age = string | number;

💡 Dica: É importante notar que os type aliases são só nomes! Não conseguimos utilizá-los para criar versões diferentes do mesmo tipo! Eles servem como uma versão "abreviada" dos tipos!

Nesse exemplo, o código está correto (apesar de parecer estranho), porque o tipo Name nada mais é do que um tipo string apelidado de Name!

type Name = string;

function greeting(name: Name): string {
    return `Olá ${name}!`;
}

greeting('Marcelo');

Interfaces

É uma outra maneira de apelidarmos tipos.

Seguindo o exemplo anterior, temos:

interface User {
    name: string;
    surname: string;
}

function showUser(user: User) {
    console.log(`Nome: ${user.name}`);
    console.log(`Sobrenome: ${user.surname}`);
}

showUser({ name: 'Marcelo', surname: 'Sarinho' });

Já que o TypeScript é uma linguagem de programação estruturalmente tipada, ele permite essa situação sem problemas. Ele só está preocupado com a estrutura do valor que passamos e se tem as propriedades esperadas!

Mas vale notar que há diferenças entre Interfaces e Type aliases, apesar de serem extremamente similares.

Diferença entre Interfaces e Type aliases

Na grande parte dos casos você pode escolher o que deseja, já que a maioria das funcionalidades da interface está disponível no type.

A diferença está em:

uma interface pode ser estendida diretamente, no type é necessário usar & para estendê-lo.
uma interface pode ser reaberta para adicionar novas propriedades, type não.

Extender

// Interface
interface Vehicle {
    color: string;
}

interface Car extends Vehicle {
    name: string;
}

const car = getCar();
car.color;
car.name;

// -----------------------------------------------------------

// Type
type Vehicle = {
    color: string;
}

type Car = Vehicle & {
    name: string
}

const car = getCar();
car.color;
car.name;

Reabrir

// Interface

interface Movie {
    name: string;
}

interface Movie {
    genre: string;
}

// -------------------------------------------------------------

// Type

type Movie = {
    name: string;
}

type Movie = {
    genre: string
}

// Gera o erro Error: Duplicate identifier 'Window'.

Novamente, na maior parte dos casos, use o que preferir! Futuramente, veremos mais a fundo esses conceitos.

Type assertions

Há casos em que o TypeScript não tem informação sobre o tipo de um valor, enquanto nós temos essa informação, com absoluta certeza.

Por exemplo: estamos usando document.getElementById para pegar o elemento de ID card. Nessa situação, o TypeScript sabe que será retornado um tipo HTMLElement, mas não sabe mais do que isso. Entretanto, nós sabemos que o elemento de ID card é uma div! Podemos então usar um type assertion:

const card = document.getElementById('card') as HTMLDivElement;

💡 Dica: O TypeScript só permite o uso de type assertions entre tipos compatíveis (mais ou menos específicos), nunca entre tipos totalmente diferentes! Não é possível "trocar" o tipo para outro abruptamente (string para number, number para string, etc)! Exemplo:

const year = 2025 as string

// Isso daqui geraria um erro!

Literal types

Além dos tipos que vimos anteriormente (strings, numbers, objects, etc), podemos ter strings ou números específicos. Um literal type (ou tipo literal) é um valor exato, não apenas o tipo geral. Exemplo:

const text = "Texto";

// Nesse caso, o tipo da variável text será "Texto"

Uma boa maneira de lembrar do conceito de literal types é comparar com as variáveis JavaScript:

let e var permitem alterar o conteúdo da variável, sendo assim, seu tipo seria mais geral, uma string, por exemplo.
const não permite alterar o conteúdo da variável, sendo assim, o tipo seria específico, como "Teste", por exemplo.

let var1 = "Variável um";
// Tipo: string

const var2 = "Variável dois";
// Tipo: "Variável dois";

Sozinho, um literal type não é muito útil... Mas, se combinados (através de um union), eles são muito úteis!

Vamos supor que temos uma função que mostra o cargo de um programador, e esses cargos só podem ser júnior, pleno ou sênior. Teríamos:

function showRole(role: 'junior' | 'pleno' | 'senior') {
    console.log(role);
}

showRole('junior'); // Correto!
showRole('tech lead');
// Aqui, temos um erro! Não é possível passar o argumento "tech lead", pois só aceita 'junior', 'pleno' ou 'senior'.

Além de strings, os literal types também funcionam com números ou tipos não literais também!

Literal inference

Ao lidarmos com objetos, a situação é um pouco diferente. Quando inicializamos uma variável com um objeto, o TypeScript não entende que aquilo é um literal type, pois acha que aquela propriedade pode mudar de valor depois.

Esse comportamento é chamado de literal inference. Quando inicializamos objetos, o TypeScript infere tipos mais genéricos, já que as propriedades podem mudar de valor.

Exemplo:

const obj = { likes: 0 };

if (condition) {
    obj.likes = 1; // Aqui, a propriedade mudou de valor
}

O TypeScript entende que a propriedade likes é do tipo number, e não 0. Por causa disso, esse exemplo não emite nenhum erro. O mesmo é aplicado a strings.

O que fazer nesse caso? Temos duas maneiras de "passar por cima" disso. Observe o exemplo a seguir:

declare function addRole(name: string, role: "ADMIN" | "SUPER" | "COMMON"): void;  

const employee = { name: "Marcelo", role: "SUPER" };
addRole(employee.name, employee.role);
// Aqui, temos um erro: Argument of type 'string' is not assignable to parameter of type '"ADMIN" | "SUPER" | "COMMON"'.

Percebeu que o TypeScript não entendeu a propriedade role como SUPER, mas sim como uma string? Então, foi isso que ocasionou o erro! Para corrigirmos, teríamos duas opções:

Usando type assertion

Utilizamos um type assertion para transformar employee.role em SUPER.

const employee = { name: "Marcelo", role: "SUPER" as "SUPER" };

// ou também

addRole(employee.name, employee.role as "SUPER");

Usando `as const`

Utilizamos as const para converter o objeto e transformá-lo em um literal type.

const employee = { name: "Marcelo", role: "SUPER" } as const;
addRole(employee.name, employee.role);

Pronto, resolvido!

Null e undefined

O TypeScript tem os tipos null e undefined, e o comportamento deles depende da maneira que o seu strictNullChecks está configurado no arquivo tsconfig.json.

Com strictNullChecks desligado

Nesse caso, valores que podem ser null ou undefined podem ser acessados sem problema, e também é possível atribuir esses valores para uma propriedade. Entretanto, essa configuração pode gerar MUITOS bugs, portanto, é recomendado que utilize o strictNullChecks!

Com strictNullChecks ligado

Esse é o caso "ideal". Nessa situação, precisamos verificar o valor antes de usar seus métodos ou propriedades. Exemplo:

function upperCaseString(text: string | null) {
    if (text) {
        console.log(text.toUpperCase());
    } else {
        console.log("Não há texto!");
    }
}

// Nesse caso, teria um erro
function upperCaseStringAgain(anotherText: string | null) {
    console.log(anotherText.toUpperCase());
    // Aqui, temos um aviso: 'anotherText' is possibly 'null'.
}

Aqui, só conseguimos utilizar o .toUpperCase() se o valor for diferente de null.

Temos uma outra maneira de remover o null ou undefined de um tipo: usando o non-null assertion operator (!). Esse operador garante que o valor não é null nem undefined.

function upperCaseString(text: string | null) {
    console.log(text!.toUpperCase());
}

💡 Dica: Tome cuidado! Só use esse operador caso tenha CERTEZA de que o valor não é null nem undefined, se não podem surgir bugs inesperados na sua aplicação!

Enums

Permite que o programador defina um conjunto de constantes usando nomes. Exemplo:

enum Color {
    Red = 1,
    Yellow,
    Blue,
}

Enums são uma funcionalidade adicionada pelo TypeScript (não existem no JavaScript puro) e vão além do sistema de tipos. Por causa disso, recomendo ler a documentação oficial do TypeScript sobre Enums.

Primitivos menos comuns

Esses são primitivos que não aparecem tão frequentemente, mas vale a pena saber sobre sua existência para você não ficar confuso caso apareçam nos códigos.

bigint

Primitivo utilizado para inteiros muito grandes:

const hundred: bigint = BigInt(100);

Para se aprofundar nesse tipo, acesse a documentação oficial do TypeScript.

symbol

Primitivo utilizado para criar uma referência global única:

const oneName = Symbol("name");
const anotherName = Symbol("name");

if (oneName === anotherName) {
    // ...
}

// Nesse caso, temos um erro: This comparison appears to be unintentional because the types 'typeof oneName' and 'typeof anotherName' have no overlap.

Para se aprofundar nesse tipo, acesse a documentação oficial do TypeScript.

Conclusão

Chegamos ao fim do artigo! Junto com a primeira parte do artigo, este conteúdo forma uma base sólida para compreender conceitos mais avançados de TypeScript. Novamente, uma recomendação para praticar esses fundamentos é pegar projetos antigos feitos somente em JavaScript, e tentar refatorar utilizando esses conceitos. Em caso de dúvidas, pode colocar nos comentários e responderei o mais rápido possível!

Caso queira, aqui está a documentação oficial do TypeScript.

Obrigado!

Tipos básicos do TypeScript - Parte 1

Marcelo — Thu, 10 Oct 2024 00:43:37 +0000

O que um programador deve aprender, partindo do JavaScript, para começar a utilizar a linguagem TypeScript? A resposta está no próprio nome da linguagem, traduzido do inglês: tipos! Além disso, uma base bem estruturada permite aprender com maior facilidade assuntos mais complexos sobre TypeScript.

Tabela de conteúdos

Primitivos, arrays e any
Tipos nas variáveis
Funções
Tipos de objeto
Union types
Conclusão

Primitivos, arrays e any

Primitivos

Vamos começar pelos primitivos. Mas, primeiro, o que seria isso? Tecnicamente falando, um primitivo é um dado que não é um objeto, e não possui métodos ou propriedades. Agora, simplificando: são tipos que utilizamos constantemente no JavaScript!
Sabe quando você declara uma variável e atribui um número, texto ou booleano? Então, embora não vejamos especificamente o seu tipo, os tipos delas fazem parte desse grupo! São eles: string, number, boolean, null, undefined, e outros. No TypeScript não é diferente, continuamos utilizando esses tipos frequentemente, mas dessa vez nós declaramos os tipos.

string é um texto. Exemplo: "Olá, mundo!"
number é um número. Exemplo: 123
boolean é um verdadeiro ou falso. Exemplo: true

OBS: utilize os tipos sempre com letra minúscula!

Arrays

Os tipos dos arrays seguem quase a mesma ideia, a diferença é que temos um [] no final da declaração para mostrar que é um array, é bem simples. Para declarar o tipo de um array, basta escrevermos o tipo seguido de [].
Por exemplo:

Um array de strings: string[]
Um array de números: number[]
Um array de booleanos: boolean[]

É possível, também, declararmos um array dessa maneira: Array<string>. Seria a mesma coisa, use o que achar mais confortável.

Any

A tradução desse tipo, para português, é qualquer. Ou seja, com esse tipo assumimos que uma variável ou dado pode ser de qualquer tipo, e isso faz com que o TypeScript não cheque se há erros de tipagem no código envolvendo a variável ou dado com esse tipo. Por exemplo:

let valor: any;

valor = 20;
valor = "vinte";
valor = true;

// o TypeScript não irá acusar nenhum erro de tipagem, pois valor é
// do tipo any.

Basicamente, utitilizando o any, faremos com que o código volte a se comportar como JavaScript. Isso é uma maneira de resolver algumas mensagens de erro que o TypeScript exibe quando colocamos (ou deixamos implícito) o tipo errado, mas tome cuidado ao usar o any, tente ser o mais organizado possível com seu código ao utilizar esse tipo!
A documentação oficial do TypeScript inclusive recomenda utilizar o tipo unknown (traduzindo: desconhecido) quando queremos dar um tipo a algo que não sabemos.

Tipos nas variáveis

Podemos definir um tipo nas variáveis que declaramos. O tipo vem depois da variável, seguindo esse formato:

// Variável numérica
let numero: number = 30;

// Variável de texto
let texto: string = "Variável do tipo string"

// Variável de verdadeiro ou falso
let booleano: boolean = true;

Mas, caso você esqueça de colocar o tipo, o TypeScript faz isso para você automaticamente (na maioria dos casos). O valor que inicializarmos a variável vai ditar o seu tipo:

let numero = 55; // TypeScript define o tipo como number
let texto = "Texto qualquer"; // TypeScript define o tipo como string
let booleano = false; // TypeScript define o tipo como boolean

Então, nas vezes que você esquecer de declarar o tipo de uma variável, não se preocupe! Provavelmente o TypeScript terá declarado o tipo correto para você, e nenhuma mensagem de erro aparecerá!

Funções

Nas funções, podemos definir um tipo tanto nos parâmetros que são passados pela função, quanto no resultado dessa função. Para colocar tipo nos parâmetros, devemos colocar o nome do parâmetro, seguindo do seu tipo. Já para colocar um tipo no retorno da função, devemos definir o tipo após os parâmetros da função. Segue um exemplo para melhor entendimento:

// Função do tipo number, que recebe um parâmetro do tipo number
function soma(numero: number): number {
    return numero + 5;
}

// Função do tipo string que não recebe nenhum parâmetro
function olaMundo(): string {
    return "Olá, mundo!"
}

Na função soma, estamos recebendo um parâmetro numérico, e retornamos uma soma (o tipo da soma é numérico, logo, a função é do tipo number).
Na função olaMundo, não recebemos nenhum parâmetro, mas retornamos um texto, o que faz a função ser do tipo string.

Tipos de objeto

Os tipos de objeto também são muito utilizados no TypeScript. Para definir um tipo de objeto é simples: basta definir a propriedade e, em seguida, o tipo dessa propriedade, no seguinte formato: propriedade: tipo. Por exemplo, na função a seguir precisamos de nome e sobrenome do usuário:

// Função para mostrar nome e sobrenome de um usuário
function mostraUsuario(usuario: { nome: string, sobrenome: string }) {
    console.log(`Nome: ${usuario.nome}`);
    console.log(`Sobrenome: ${usuario.sobrenome}`);
}

mostraUsuario({ nome: "John", sobrenome: "Doe" });

Ou ainda, vamos supor que o parâmetro de sobrenome dessa função seja opcional. Para isso, colocamos ? na frente do nome da propriedade.

// Função para mostrar o nome (obrigatório) e sobrenome (opcional)
function mostraUsuario(usuario: { nome: string, sobrenome?: string }) {
    // ...
}

// Ambos irão funcionar
mostraUsuario({ nome: "John", sobrenome: "Doe" });
mostraUsuario({ nome: "John" });

Por último, caso você não coloque nenhum tipo na propriedade do objeto, o TypeScript assumirá que o tipo é any.

Union Types

Por fim, temos os union types (ou, traduzindo, "união de tipos"). Esse conceito é um pouco mais complicado do que os anteriores, tem mais teoria por trás, e requer um pouco mais de atenção. Um union type é uma união de dois ou mais tipos, e o valor pode ser de qualquer um desses tipos escolhidos. Por exemplo, temos uma função que mostra o preço de um produto:

function mostraPreco(preco: string | number) {
    console.log(`Preço: R$ ${preco}`);
}

// Isso é aceito
mostraPreco(150);
// Isso também é aceito
mostraPreco("250");
// Isso NÃO é aceito, pois é um tipo boolean!
mostraPreco(true);

Mas, se temos uma variável que pode ser string ou number, como que faremos para lidar com ela? Nesse caso, devemos utilizar operações ou métodos que sejam compatíveis com ambos os tipos, por exemplo:

function mostraPreco(preco: string | number) {
    console.log(preco.valueOf());
}

No exemplo acima, o código não acusaria erro, pois o método valueOf() é compatível tanto com tipo string quanto tipo number. Agora, em casos que queremos utilizar uma operação ou outra que seja exclusiva de um tipo, devemos tratar o código, verificando o tipo do parâmetro que foi fornecido, assim:

function mostraPreco(preco: string | number) {
    if (typeof preco === "string") {
        console.log("Preço: ", preco.toUpperCase());
    } else {
        console.log("Preço: ", preco.toPrecision(2));
    }
}

Dessa maneira, utilizaremos um método de texto para caso o tipo da variável seja string, se não, usaremos um método número para caso a variável seja do tipo number. Dessa maneira, o TypeScript não acusará erros, pois o código estará adequado a cada caso.

Para simplificar essa explicação, podemos utilizar uma imagem para facilitar o entendimento desses tipos:

No caso da imagem, do lado esquerdo teríamos as frutas (banana, laranja, etc), que podem ou não ser da cor vermelha. No lado direito, teríamos os alimentos vermelhos (tomate, pimenta, etc), que podem ou não ser frutas. No centro, teríamos um alimento que é tanto fruta quanto vermelho: a maçã. Se fossemos levar pro lado da programação, a maçã poderia usar métodos de frutas, quanto métodos de alimentos vermelhos, assim como o exemplo da string | number.

Conclusão

Grande parte deste artigo não tem muita teoria por trás (com exceção dos Union Types), sendo necessário praticar para se adaptar a como trabalhar com tipos em TypeScript.
Pratique com projetos novos e antigos. Eu recomendo transformar tudo em tipos nos seus projetos, desde uma simples variável que não faça nada demais, até refatorar projetos antigos feitos em JavaScript, passando a definir tipos pro projeto.

Por fim, caso queira consultar e estudar a documentação oficial do TypeScript: https://www.typescriptlang.org/docs/

Obrigado!!

DEV Community: Marcelo

Tipos básicos do TypeScript - Parte 2

Tabela de conteúdos

Type aliases

Interfaces

Diferença entre Interfaces e Type aliases

Type assertions

Literal types

Literal inference

Usando type assertion

Usando as const

Null e undefined

Com strictNullChecks desligado

Com strictNullChecks ligado

Enums

Primitivos menos comuns

bigint

symbol

Conclusão

Tipos básicos do TypeScript - Parte 1

Tabela de conteúdos

Primitivos, arrays e any

Primitivos

Arrays

Any

Tipos nas variáveis

Funções

Tipos de objeto

Union Types

Conclusão

Usando `as const`