Se você já estudou Programação Orientada a Objetos (POO), provavelmente criou exemplos como uma conta bancária, uma classe Pessoa ou um sistema de animais.

Esses exemplos ajudam a entender os conceitos, mas existe um problema: eles quase nunca mostram como aplicar a Orientação a Objetos em um projeto Front-End de verdade.

A boa notícia é que isso está longe da realidade. Neste artigo você vai descobrir como utilizar TypeScript para construir um sistema real, aplicando Classes, Herança, Polimorfismo, Interfaces e manipulação do DOM de forma prática.

---

🎥 Assista ao projeto

Se preferir aprender acompanhando o desenvolvimento na prática, assista ao vídeo editado do projeto.

▶ Vídeo editado (30 minutos):

Se quiser acompanhar todo o processo de desenvolvimento, incluindo explicações, dúvidas e decisões tomadas durante a implementação, assista também à live completa.

🔴 Live completa:

---

Por que aprender Orientação a Objetos?

A Programação Orientada a Objetos surgiu para resolver um problema muito comum em sistemas grandes: a organização do código.

Quando um projeto cresce, criar apenas funções espalhadas pelo sistema torna a manutenção cada vez mais difícil.

A POO organiza a aplicação utilizando objetos que representam elementos do mundo real.

Em vez de pensar apenas em funções, passamos a modelar clientes, funcionários, veículos, produtos, pedidos e qualquer outra entidade existente no sistema.

Essa forma de desenvolvimento torna o código mais organizado, reutilizável e fácil de manter.

Além disso, linguagens como o TypeScript adicionam tipagem estática e recursos que tornam esse processo ainda mais seguro e produtivo.

---

O projeto desenvolvido

Neste projeto construiremos um sistema simples para gerenciar funcionários de uma oficina automotiva.

Teremos diferentes tipos de funcionários, como:

• Mecânicos
• Especialistas
• Gerentes

Cada um possui características específicas, mas todos compartilham informações em comum.

Esses dados serão exibidos automaticamente na tela através da manipulação do DOM utilizando TypeScript.

Além disso, você aprenderá como organizar um projeto Front-End utilizando uma estrutura muito próxima da encontrada em aplicações profissionais.

---

Conceitos de Programação Orientada a Objetos utilizados

Durante o desenvolvimento serão apresentados diversos conceitos fundamentais da Programação Orientada a Objetos.

Classes

As classes funcionam como um molde para criação dos objetos.

Nelas definimos atributos e comportamentos que serão compartilhados por todas as instâncias.

---

Objetos

Os objetos representam os elementos reais do sistema.

Cada funcionário possui seus próprios dados, mas todos seguem a estrutura definida pela classe.

---

Herança

A herança permite reutilizar código.

Em vez de repetir propriedades e métodos em diversas classes, podemos criar uma classe base e especializar apenas aquilo que muda.

Essa técnica reduz duplicação e facilita futuras manutenções.

---

Polimorfismo

O polimorfismo permite que diferentes objetos respondam ao mesmo comportamento de maneiras diferentes.

Esse é um dos conceitos mais importantes da POO e, ao mesmo tempo, um dos que mais geram dúvidas para quem está começando.

No projeto ele é apresentado de forma totalmente prática.

---

Interfaces e Types

O TypeScript oferece recursos extremamente úteis para aumentar a segurança do código.

Durante o projeto utilizamos Interfaces e Types para definir contratos entre os objetos.

Isso reduz erros durante o desenvolvimento e melhora a experiência do programador graças à verificação realizada pelo compilador.

---

Modificadores de acesso

Também veremos como utilizar:

• public
• private
• protected

Esses modificadores controlam quais propriedades e métodos podem ser acessados por outras partes da aplicação, tornando o código mais seguro e organizado.

---

TypeScript no Front-End

Muitos desenvolvedores associam o TypeScript apenas ao Angular ou ao React.

Na prática, ele pode ser utilizado em qualquer projeto JavaScript.

Neste projeto utilizamos TypeScript puro manipulando o DOM, demonstrando que é perfeitamente possível criar aplicações organizadas mesmo sem frameworks.

Essa abordagem fortalece os fundamentos e facilita muito a migração posterior para React, Angular ou Vue.

---

Manipulação do DOM

Depois de criar os objetos do sistema, precisamos exibir essas informações na interface.

Durante o desenvolvimento você aprenderá como:

• selecionar elementos HTML;
• criar componentes dinamicamente;
• gerar cards automaticamente;
• atualizar a interface utilizando TypeScript.

Tudo isso sem depender de frameworks.

---

Organização do projeto

Outro ponto importante apresentado no projeto é a organização dos arquivos.

Mesmo sendo um projeto relativamente pequeno, utilizamos uma estrutura que facilita futuras expansões da aplicação.

Esse tipo de organização aproxima o desenvolvimento dos projetos encontrados no mercado de trabalho.

---

O que você aprenderá

Ao finalizar este projeto você terá colocado em prática:

• Classes
• Objetos
• Herança
• Polimorfismo
• Interfaces
• Types
• Modificadores de acesso
• TypeScript
• Manipulação do DOM
• Renderização dinâmica
• Organização de projetos Front-End
• Boas práticas de desenvolvimento

Mais importante do que decorar código é compreender por que cada conceito existe e quando utilizá-lo.

Esse entendimento faz toda a diferença quando você começa a desenvolver aplicações maiores.

---

No canal Desvendando o Código, o objetivo é sempre ensinar os conceitos por trás da tecnologia. Em vez de apenas copiar código, você aprende a entender como as ferramentas funcionam e como aplicá-las na construção de sistemas reais.

Bons estudos e bons códigos!