Full-Stack TypeScript Como usar Enum no typescript Como usar types no typescript Guia prático sobre typescript

Desvendando Types e Enums no TypeScript: guia prático para iniciantes

Rocketseat

3 min de leitura

Acelere sua carreira com a Rocketseat

Aproveite a black month para garantir seu plano na melhor condição!

A jornada para um código mais seguro e legível começa aqui! No universo da programação, onde erros sutis podem causar grandes problemas, ferramentas que ajudam a prevenir bugs e melhorar a organização do código são indispensáveis. O TypeScript surge como uma solução poderosa para trazer tipagem estática ao JavaScript, permitindo maior controle sobre o que seu código faz. Hoje, vamos explorar dois conceitos fundamentais para isso: Types e Enums.

Este guia é voltado para iniciantes e vai mostrar como esses recursos podem restringir valores, aumentar a legibilidade e transformar sua experiência como dev. Então, prepare-se para mergulhar nesse universo!

Types: definindo valores possíveis

Os Types no TypeScript são como contratos que definem a estrutura e os valores permitidos em um código. Isso significa menos surpresas e mais previsibilidade no comportamento das variáveis.

Exemplo prático

Imagine que você esteja criando um e-commerce. Você tem um produto com propriedades como id, nome e quantidade. Podemos usar uma interface para garantir que todo produto siga esse padrão:


interface Product {
  id: number;
  nome: string;
  quantidade: number;
}

const product1: Product = {
  id: 1,
  nome: "Produto 1",
  quantidade: 10,
};

O TypeScript ajuda a garantir que todo objeto do tipo Product terá as propriedades definidas na interface.

Restrição de valores

Agora, digamos que queremos limitar os possíveis valores de uma propriedade. Por exemplo, você quer que a propriedade categoria só possa ser "Eletrônicos", "Livros" ou "Roupas". Com um type alias, você pode fazer isso:


type Categoria = "Eletrônicos" | "Livros" | "Roupas";

const categoriaProduto: Categoria = "Eletrônicos"; // válido
const categoriaInvalida: Categoria = "Móveis"; // erro!

Isso reduz a chance de erros e melhora a consistência do código.

Reaproveitando Tipos com Type of

O operador Type of é perfeito quando você quer reaproveitar uma estrutura já existente. Ele infere o tipo a partir de uma variável ou objeto.

Exemplo prático: Criando tipos derivados

Você já tem um produto inicial e quer criar outro com as mesmas propriedades, mas sem repetir código:


const product2: typeof product1 = {
  id: 2,
  nome: "Produto 2",
  quantidade: 20,
};

Se adicionar uma nova propriedade a product1, como preco, o TypeScript imediatamente indicará que product2 também precisa dessa propriedade.

Aplicação real: APIs e bibliotecas

Imagine que você está consumindo uma API que retorna um objeto com várias propriedades. Com Type of, é possível usar a estrutura retornada pela API como base para seus próprios tipos, garantindo consistência.

Extraindo chaves com Key of

O operador Key of permite criar tipos que representam as chaves de um objeto. Isso é útil para evitar o uso de strings fixas e sujeitas a erros.

Exemplo prático: mapeando ícones

Você tem um objeto que representa ícones e seus caminhos:


const icons = {
  home: "/icons/home.svg",
  add: "/icons/add.svg",
  remove: "/icons/remove.svg",
};

type IconKey = keyof typeof icons;

const selectedIcon: IconKey = "home"; // válido
const invalidIcon: IconKey = "settings"; // erro!

Com Key of, você garante que apenas chaves válidas de icons sejam utilizadas.

Enums: constantes nomeadas e legibilidade

Os Enums são outra ferramenta poderosa no TypeScript. Eles permitem agrupar constantes relacionadas em um único lugar, tornando o código mais intuitivo e fácil de manter.

Criando e usando Enums

Por exemplo, imagine um sistema com diferentes níveis de acesso para usuários:


enum UserRole {
  Admin = "Admin",
  Editor = "Editor",
  Viewer = "Viewer",
}

const currentUserRole: UserRole = UserRole.Admin;

if (currentUserRole === UserRole.Admin) {
  console.log("Bem-vindo, administrador!");
}

Aqui, o uso de UserRole torna o código mais legível e evita o uso de strings dispersas.

Combinando Types e Enums

Você pode combinar Types e Enums para criar um código ainda mais robusto. Por exemplo:


enum Status {
  Pendente = "Pendente",
  Enviado = "Enviado",
  Entregue = "Entregue",
}

type Pedido = {
  id: number;
  cliente: string;
  status: Status;
};

const pedido1: Pedido = {
  id: 123,
  cliente: "Mayk",
  status: Status.Enviado,
};

Nesse exemplo, a combinação de type e enum garante que status só possa assumir valores do enum Status.

Conclusão

Types e Enums são recursos indispensáveis para quem quer escrever um código mais confiável e legível. Com eles, você pode:

Restringir valores para evitar erros;

Reutilizar estruturas com Type of;

Garantir o uso de valores válidos com Key of;

Melhorar a organização do código com Enums.

Agora é a sua vez! Experimente implementar esses conceitos nos seus projetos. E se quiser ir além, que tal dar o próximo passo e se tornar um desenvolvedor full stack completo?

A Formação Full-Stack da Rocketseat é ideal para quem quer dominar as principais tecnologias do mercado, como JavaScript, React.js, Node.js e TypeScript. Além de aulas práticas, você terá acesso a:

Projetos reais para construir um portfólio de impacto;

Mentoria personalizada para dúvidas e carreira;

Certificado reconhecido no mercado.

Tudo isso com a orientação de instrutores experientes, como Mayk Brito e Rodrigo Gonçalves, que já ajudaram milhares de devs a conquistarem suas primeiras vagas. Dê o próximo passo na sua jornada dev e alcance seus objetivos!

🚀

Saiba mais sobre a Formação Full-Stack.

Formação completa full stack | Aprenda programação na Rocketseat | Rocketseat

Aprenda do zero as principais linguagens web, domine desenvolvimento full stack e conheça tudo que precisa pra iniciar sua carreira e conquistar sua primeira vaga em programação.

https://www.rocketseat.com.br/formacao/fullstack?utm_source=site&utm_medium=organic&utm_campaign=lead&utm_term=artigo&utm_content=link-types_enums_typescript_guia

Types: definindo valores possíveis

Os Types no TypeScript são como contratos que definem a estrutura e os valores permitidos em um código. Isso significa menos surpresas e mais previsibilidade no comportamento das variáveis.

Exemplo prático

Imagine que você esteja criando um e-commerce. Você tem um produto com propriedades como id, nome e quantidade. Podemos usar uma interface para garantir que todo produto siga esse padrão:


interface Product {
  id: number;
  nome: string;
  quantidade: number;
}

const product1: Product = {
  id: 1,
  nome: "Produto 1",
  quantidade: 10,
};

O TypeScript ajuda a garantir que todo objeto do tipo Product terá as propriedades definidas na interface.

Restrição de valores


type Categoria = "Eletrônicos" | "Livros" | "Roupas";

const categoriaProduto: Categoria = "Eletrônicos"; // válido
const categoriaInvalida: Categoria = "Móveis"; // erro!

Isso reduz a chance de erros e melhora a consistência do código.

Reaproveitando Tipos com Type of

O operador Type of é perfeito quando você quer reaproveitar uma estrutura já existente. Ele infere o tipo a partir de uma variável ou objeto.

Exemplo prático: Criando tipos derivados

Você já tem um produto inicial e quer criar outro com as mesmas propriedades, mas sem repetir código:


const product2: typeof product1 = {
  id: 2,
  nome: "Produto 2",
  quantidade: 20,
};

Se adicionar uma nova propriedade a product1, como preco, o TypeScript imediatamente indicará que product2 também precisa dessa propriedade.

Aplicação real: APIs e bibliotecas

Extraindo chaves com Key of

O operador Key of permite criar tipos que representam as chaves de um objeto. Isso é útil para evitar o uso de strings fixas e sujeitas a erros.

Exemplo prático: mapeando ícones

Você tem um objeto que representa ícones e seus caminhos:


const icons = {
  home: "/icons/home.svg",
  add: "/icons/add.svg",
  remove: "/icons/remove.svg",
};

type IconKey = keyof typeof icons;

const selectedIcon: IconKey = "home"; // válido
const invalidIcon: IconKey = "settings"; // erro!

Com Key of, você garante que apenas chaves válidas de icons sejam utilizadas.

Enums: constantes nomeadas e legibilidade

Os Enums são outra ferramenta poderosa no TypeScript. Eles permitem agrupar constantes relacionadas em um único lugar, tornando o código mais intuitivo e fácil de manter.

Criando e usando Enums

Por exemplo, imagine um sistema com diferentes níveis de acesso para usuários:


enum UserRole {
  Admin = "Admin",
  Editor = "Editor",
  Viewer = "Viewer",
}

const currentUserRole: UserRole = UserRole.Admin;

if (currentUserRole === UserRole.Admin) {
  console.log("Bem-vindo, administrador!");
}

Aqui, o uso de UserRole torna o código mais legível e evita o uso de strings dispersas.

Combinando Types e Enums

Você pode combinar Types e Enums para criar um código ainda mais robusto. Por exemplo:


enum Status {
  Pendente = "Pendente",
  Enviado = "Enviado",
  Entregue = "Entregue",
}

type Pedido = {
  id: number;
  cliente: string;
  status: Status;
};

const pedido1: Pedido = {
  id: 123,
  cliente: "Mayk",
  status: Status.Enviado,
};

Nesse exemplo, a combinação de type e enum garante que status só possa assumir valores do enum Status.

Conclusão

Types e Enums são recursos indispensáveis para quem quer escrever um código mais confiável e legível. Com eles, você pode:

Restringir valores para evitar erros;

Reutilizar estruturas com Type of;

Garantir o uso de valores válidos com Key of;

Melhorar a organização do código com Enums.

Agora é a sua vez! Experimente implementar esses conceitos nos seus projetos. E se quiser ir além, que tal dar o próximo passo e se tornar um desenvolvedor full stack completo?

Projetos reais para construir um portfólio de impacto;

Mentoria personalizada para dúvidas e carreira;

Certificado reconhecido no mercado.

🚀

Saiba mais sobre a Formação Full-Stack.

Formação completa full stack | Aprenda programação na Rocketseat | Rocketseat

Aprenda do zero as principais linguagens web, domine desenvolvimento full stack e conheça tudo que precisa pra iniciar sua carreira e conquistar sua primeira vaga em programação.

https://www.rocketseat.com.br/formacao/fullstack?utm_source=site&utm_medium=organic&utm_campaign=lead&utm_term=artigo&utm_content=link-types_enums_typescript_guia

Types: definindo valores possíveis

Os Types no TypeScript são como contratos que definem a estrutura e os valores permitidos em um código. Isso significa menos surpresas e mais previsibilidade no comportamento das variáveis.

Exemplo prático

Imagine que você esteja criando um e-commerce. Você tem um produto com propriedades como id, nome e quantidade. Podemos usar uma interface para garantir que todo produto siga esse padrão:


interface Product {
  id: number;
  nome: string;
  quantidade: number;
}

const product1: Product = {
  id: 1,
  nome: "Produto 1",
  quantidade: 10,
};

O TypeScript ajuda a garantir que todo objeto do tipo Product terá as propriedades definidas na interface.

Restrição de valores


type Categoria = "Eletrônicos" | "Livros" | "Roupas";

const categoriaProduto: Categoria = "Eletrônicos"; // válido
const categoriaInvalida: Categoria = "Móveis"; // erro!

Isso reduz a chance de erros e melhora a consistência do código.

Reaproveitando Tipos com Type of

O operador Type of é perfeito quando você quer reaproveitar uma estrutura já existente. Ele infere o tipo a partir de uma variável ou objeto.

Exemplo prático: Criando tipos derivados

Você já tem um produto inicial e quer criar outro com as mesmas propriedades, mas sem repetir código:


const product2: typeof product1 = {
  id: 2,
  nome: "Produto 2",
  quantidade: 20,
};

Se adicionar uma nova propriedade a product1, como preco, o TypeScript imediatamente indicará que product2 também precisa dessa propriedade.

Aplicação real: APIs e bibliotecas

Extraindo chaves com Key of

O operador Key of permite criar tipos que representam as chaves de um objeto. Isso é útil para evitar o uso de strings fixas e sujeitas a erros.

Exemplo prático: mapeando ícones

Você tem um objeto que representa ícones e seus caminhos:


const icons = {
  home: "/icons/home.svg",
  add: "/icons/add.svg",
  remove: "/icons/remove.svg",
};

type IconKey = keyof typeof icons;

const selectedIcon: IconKey = "home"; // válido
const invalidIcon: IconKey = "settings"; // erro!

Com Key of, você garante que apenas chaves válidas de icons sejam utilizadas.

Enums: constantes nomeadas e legibilidade

Os Enums são outra ferramenta poderosa no TypeScript. Eles permitem agrupar constantes relacionadas em um único lugar, tornando o código mais intuitivo e fácil de manter.

Criando e usando Enums

Por exemplo, imagine um sistema com diferentes níveis de acesso para usuários:


enum UserRole {
  Admin = "Admin",
  Editor = "Editor",
  Viewer = "Viewer",
}

const currentUserRole: UserRole = UserRole.Admin;

if (currentUserRole === UserRole.Admin) {
  console.log("Bem-vindo, administrador!");
}

Aqui, o uso de UserRole torna o código mais legível e evita o uso de strings dispersas.

Combinando Types e Enums

Você pode combinar Types e Enums para criar um código ainda mais robusto. Por exemplo:


enum Status {
  Pendente = "Pendente",
  Enviado = "Enviado",
  Entregue = "Entregue",
}

type Pedido = {
  id: number;
  cliente: string;
  status: Status;
};

const pedido1: Pedido = {
  id: 123,
  cliente: "Mayk",
  status: Status.Enviado,
};

Nesse exemplo, a combinação de type e enum garante que status só possa assumir valores do enum Status.

Conclusão

Types e Enums são recursos indispensáveis para quem quer escrever um código mais confiável e legível. Com eles, você pode:

Restringir valores para evitar erros;

Reutilizar estruturas com Type of;

Garantir o uso de valores válidos com Key of;

Melhorar a organização do código com Enums.

Agora é a sua vez! Experimente implementar esses conceitos nos seus projetos. E se quiser ir além, que tal dar o próximo passo e se tornar um desenvolvedor full stack completo?

Projetos reais para construir um portfólio de impacto;

Mentoria personalizada para dúvidas e carreira;

Certificado reconhecido no mercado.

🚀

Saiba mais sobre a Formação Full-Stack.

Formação completa full stack | Aprenda programação na Rocketseat | Rocketseat

Aprenda do zero as principais linguagens web, domine desenvolvimento full stack e conheça tudo que precisa pra iniciar sua carreira e conquistar sua primeira vaga em programação.

https://www.rocketseat.com.br/formacao/fullstack?utm_source=site&utm_medium=organic&utm_campaign=lead&utm_term=artigo&utm_content=link-types_enums_typescript_guia

Acelere sua carreira com a Rocketseat

Aproveite a black month para garantir seu plano na melhor condição!

GARANTIR AGORA

Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.

NLW

NLW: eventos que transformam código em carreiras de sucesso

Rocketseat

JavaScript

JavaScript: desvende objetos de uma vez por todas!

Rocketseat

JavaScript

JavaScript: conceitos-chave para brilhar na entrevista

Rocketseat

Carreira

Programador full stack: como é o dia a dia e os desafios

Rocketseat

JavaScript

Problemas clássicos de lógica resolvidos com JavaScript

Rocketseat

JavaScript

NestJS: protegendo rotas com Guards

Rocketseat

JavaScript

Funções em JavaScript: guia completo para iniciantes

Mayk Brito

Node.js

TypeScript: elevando seu código no React e Node.js

Rocketseat

JavaScript

JavaScript: Estruturas condicionais

Rocketseat

React

Como começar a aprender React Native: Guia completo para iniciantes

Rocketseat