{"id":2132,"date":"2026-07-08T11:09:46","date_gmt":"2026-07-08T14:09:46","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2132"},"modified":"2026-07-08T11:36:42","modified_gmt":"2026-07-08T14:36:42","slug":"voce-achou-que-orientacao-a-objetos-era-so-para-backend-aprenda-poo-com-um-projeto-real-em-typescript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2132","title":{"rendered":"Projeto Completo com TypeScript e Orienta\u00e7\u00e3o a Objetos | POO, Classes, Heran\u00e7a e Polimorfismo"},"content":{"rendered":"\n<p>Se voc\u00ea j\u00e1 estudou Programa\u00e7\u00e3o Orientada a Objetos (POO), provavelmente criou exemplos como uma conta banc\u00e1ria, uma classe Pessoa ou um sistema de animais.<\/p>\n\n\n\n<p>Esses exemplos ajudam a entender os conceitos, mas existe um problema: eles quase nunca mostram como aplicar a Orienta\u00e7\u00e3o a Objetos em um projeto Front-End de verdade.<\/p>\n\n\n\n<p>A boa not\u00edcia \u00e9 que isso est\u00e1 longe da realidade. Neste artigo voc\u00ea vai descobrir como utilizar <strong>TypeScript<\/strong> para construir um sistema real, aplicando Classes, Heran\u00e7a, Polimorfismo, Interfaces e manipula\u00e7\u00e3o do DOM de forma pr\u00e1tica.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfa5 Assista ao projeto<\/h1>\n\n\n\n<p>Se preferir aprender acompanhando o desenvolvimento na pr\u00e1tica, assista ao v\u00eddeo editado do projeto.<\/p>\n\n\n\n<p><strong>\u25b6 V\u00eddeo editado (30 minutos):<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Voc\u00ea Achou Que Orienta\u00e7\u00e3o a Objetos Era S\u00f3 Para Backend? Projeto Real com TypeScript\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/c3q87A9ouic?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>Se quiser acompanhar todo o processo de desenvolvimento, incluindo explica\u00e7\u00f5es, d\u00favidas e decis\u00f5es tomadas durante a implementa\u00e7\u00e3o, assista tamb\u00e9m \u00e0 live completa.<\/p>\n\n\n\n<p><strong>\ud83d\udd34 Live completa:<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Mini Projeto TypeScript na Pr\u00e1tica | POO no Front-End do Zero\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/aXGWUQgObDo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Por que aprender Orienta\u00e7\u00e3o a Objetos?<\/h1>\n\n\n\n<p>A Programa\u00e7\u00e3o Orientada a Objetos surgiu para resolver um problema muito comum em sistemas grandes: a organiza\u00e7\u00e3o do c\u00f3digo.<\/p>\n\n\n\n<p>Quando um projeto cresce, criar apenas fun\u00e7\u00f5es espalhadas pelo sistema torna a manuten\u00e7\u00e3o cada vez mais dif\u00edcil.<\/p>\n\n\n\n<p>A POO organiza a aplica\u00e7\u00e3o utilizando objetos que representam elementos do mundo real.<\/p>\n\n\n\n<p>Em vez de pensar apenas em fun\u00e7\u00f5es, passamos a modelar clientes, funcion\u00e1rios, ve\u00edculos, produtos, pedidos e qualquer outra entidade existente no sistema.<\/p>\n\n\n\n<p>Essa forma de desenvolvimento torna o c\u00f3digo mais organizado, reutiliz\u00e1vel e f\u00e1cil de manter.<\/p>\n\n\n\n<p>Al\u00e9m disso, linguagens como o <strong>TypeScript<\/strong> adicionam tipagem est\u00e1tica e recursos que tornam esse processo ainda mais seguro e produtivo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O projeto desenvolvido<\/h1>\n\n\n\n<p>Neste projeto construiremos um sistema simples para gerenciar funcion\u00e1rios de uma oficina automotiva.<\/p>\n\n\n\n<p>Teremos diferentes tipos de funcion\u00e1rios, como:<\/p>\n\n\n\n<ul>\n<li>Mec\u00e2nicos<\/li>\n\n\n\n<li>Especialistas<\/li>\n\n\n\n<li>Gerentes<\/li>\n<\/ul>\n\n\n\n<p>Cada um possui caracter\u00edsticas espec\u00edficas, mas todos compartilham informa\u00e7\u00f5es em comum.<\/p>\n\n\n\n<p>Esses dados ser\u00e3o exibidos automaticamente na tela atrav\u00e9s da manipula\u00e7\u00e3o do DOM utilizando TypeScript.<\/p>\n\n\n\n<p>Al\u00e9m disso, voc\u00ea aprender\u00e1 como organizar um projeto Front-End utilizando uma estrutura muito pr\u00f3xima da encontrada em aplica\u00e7\u00f5es profissionais.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conceitos de Programa\u00e7\u00e3o Orientada a Objetos utilizados<\/h1>\n\n\n\n<p>Durante o desenvolvimento ser\u00e3o apresentados diversos conceitos fundamentais da Programa\u00e7\u00e3o Orientada a Objetos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Classes<\/h2>\n\n\n\n<p>As classes funcionam como um molde para cria\u00e7\u00e3o dos objetos.<\/p>\n\n\n\n<p>Nelas definimos atributos e comportamentos que ser\u00e3o compartilhados por todas as inst\u00e2ncias.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Objetos<\/h2>\n\n\n\n<p>Os objetos representam os elementos reais do sistema.<\/p>\n\n\n\n<p>Cada funcion\u00e1rio possui seus pr\u00f3prios dados, mas todos seguem a estrutura definida pela classe.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Heran\u00e7a<\/h2>\n\n\n\n<p>A heran\u00e7a permite reutilizar c\u00f3digo.<\/p>\n\n\n\n<p>Em vez de repetir propriedades e m\u00e9todos em diversas classes, podemos criar uma classe base e especializar apenas aquilo que muda.<\/p>\n\n\n\n<p>Essa t\u00e9cnica reduz duplica\u00e7\u00e3o e facilita futuras manuten\u00e7\u00f5es.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Polimorfismo<\/h2>\n\n\n\n<p>O polimorfismo permite que diferentes objetos respondam ao mesmo comportamento de maneiras diferentes.<\/p>\n\n\n\n<p>Esse \u00e9 um dos conceitos mais importantes da POO e, ao mesmo tempo, um dos que mais geram d\u00favidas para quem est\u00e1 come\u00e7ando.<\/p>\n\n\n\n<p>No projeto ele \u00e9 apresentado de forma totalmente pr\u00e1tica.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Interfaces e Types<\/h2>\n\n\n\n<p>O TypeScript oferece recursos extremamente \u00fateis para aumentar a seguran\u00e7a do c\u00f3digo.<\/p>\n\n\n\n<p>Durante o projeto utilizamos Interfaces e Types para definir contratos entre os objetos.<\/p>\n\n\n\n<p>Isso reduz erros durante o desenvolvimento e melhora a experi\u00eancia do programador gra\u00e7as \u00e0 verifica\u00e7\u00e3o realizada pelo compilador.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Modificadores de acesso<\/h2>\n\n\n\n<p>Tamb\u00e9m veremos como utilizar:<\/p>\n\n\n\n<ul>\n<li>public<\/li>\n\n\n\n<li>private<\/li>\n\n\n\n<li>protected<\/li>\n<\/ul>\n\n\n\n<p>Esses modificadores controlam quais propriedades e m\u00e9todos podem ser acessados por outras partes da aplica\u00e7\u00e3o, tornando o c\u00f3digo mais seguro e organizado.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">TypeScript no Front-End<\/h1>\n\n\n\n<p>Muitos desenvolvedores associam o TypeScript apenas ao Angular ou ao React.<\/p>\n\n\n\n<p>Na pr\u00e1tica, ele pode ser utilizado em qualquer projeto JavaScript.<\/p>\n\n\n\n<p>Neste projeto utilizamos TypeScript puro manipulando o DOM, demonstrando que \u00e9 perfeitamente poss\u00edvel criar aplica\u00e7\u00f5es organizadas mesmo sem frameworks.<\/p>\n\n\n\n<p>Essa abordagem fortalece os fundamentos e facilita muito a migra\u00e7\u00e3o posterior para React, Angular ou Vue.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Manipula\u00e7\u00e3o do DOM<\/h1>\n\n\n\n<p>Depois de criar os objetos do sistema, precisamos exibir essas informa\u00e7\u00f5es na interface.<\/p>\n\n\n\n<p>Durante o desenvolvimento voc\u00ea aprender\u00e1 como:<\/p>\n\n\n\n<ul>\n<li>selecionar elementos HTML;<\/li>\n\n\n\n<li>criar componentes dinamicamente;<\/li>\n\n\n\n<li>gerar cards automaticamente;<\/li>\n\n\n\n<li>atualizar a interface utilizando TypeScript.<\/li>\n<\/ul>\n\n\n\n<p>Tudo isso sem depender de frameworks.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Organiza\u00e7\u00e3o do projeto<\/h1>\n\n\n\n<p>Outro ponto importante apresentado no projeto \u00e9 a organiza\u00e7\u00e3o dos arquivos.<\/p>\n\n\n\n<p>Mesmo sendo um projeto relativamente pequeno, utilizamos uma estrutura que facilita futuras expans\u00f5es da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Esse tipo de organiza\u00e7\u00e3o aproxima o desenvolvimento dos projetos encontrados no mercado de trabalho.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea aprender\u00e1<\/h1>\n\n\n\n<p>Ao finalizar este projeto voc\u00ea ter\u00e1 colocado em pr\u00e1tica:<\/p>\n\n\n\n<ul>\n<li>Classes<\/li>\n\n\n\n<li>Objetos<\/li>\n\n\n\n<li>Heran\u00e7a<\/li>\n\n\n\n<li>Polimorfismo<\/li>\n\n\n\n<li>Interfaces<\/li>\n\n\n\n<li>Types<\/li>\n\n\n\n<li>Modificadores de acesso<\/li>\n\n\n\n<li>TypeScript<\/li>\n\n\n\n<li>Manipula\u00e7\u00e3o do DOM<\/li>\n\n\n\n<li>Renderiza\u00e7\u00e3o din\u00e2mica<\/li>\n\n\n\n<li>Organiza\u00e7\u00e3o de projetos Front-End<\/li>\n\n\n\n<li>Boas pr\u00e1ticas de desenvolvimento<\/li>\n<\/ul>\n\n\n\n<p>Mais importante do que decorar c\u00f3digo \u00e9 compreender por que cada conceito existe e quando utiliz\u00e1-lo.<\/p>\n\n\n\n<p>Esse entendimento faz toda a diferen\u00e7a quando voc\u00ea come\u00e7a a desenvolver aplica\u00e7\u00f5es maiores.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><\/h1>\n\n\n\n<p><\/p>\n\n\n\n<p>No canal <strong>Desvendando o C\u00f3digo<\/strong>, o objetivo \u00e9 sempre ensinar os conceitos por tr\u00e1s da tecnologia. Em vez de apenas copiar c\u00f3digo, voc\u00ea aprende a entender como as ferramentas funcionam e como aplic\u00e1-las na constru\u00e7\u00e3o de sistemas reais.<\/p>\n\n\n\n<p>Bons estudos e bons c\u00f3digos!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea j\u00e1 estudou Programa\u00e7\u00e3o Orientada a Objetos (POO), provavelmente criou exemplos como uma conta banc\u00e1ria, 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\u00e7\u00e3o a Objetos em um projeto Front-End de verdade. A boa not\u00edcia \u00e9 que isso est\u00e1 longe da realidade. Neste artigo voc\u00ea vai descobrir como utilizar TypeScript para construir um sistema real, aplicando Classes, Heran\u00e7a, Polimorfismo, Interfaces e manipula\u00e7\u00e3o do DOM de forma pr\u00e1tica. \ud83c\udfa5 Assista ao projeto Se preferir aprender acompanhando o desenvolvimento na pr\u00e1tica, assista ao v\u00eddeo editado do projeto. \u25b6 V\u00eddeo editado (30 minutos): Se quiser acompanhar todo o processo de desenvolvimento, incluindo explica\u00e7\u00f5es, d\u00favidas e decis\u00f5es tomadas durante a implementa\u00e7\u00e3o, assista tamb\u00e9m \u00e0 live completa. \ud83d\udd34 Live completa: Por que aprender Orienta\u00e7\u00e3o a Objetos? A Programa\u00e7\u00e3o Orientada a Objetos surgiu para resolver um problema muito comum em sistemas grandes: a organiza\u00e7\u00e3o do c\u00f3digo. Quando um projeto cresce, criar apenas fun\u00e7\u00f5es espalhadas pelo sistema torna a manuten\u00e7\u00e3o cada vez mais dif\u00edcil. A POO organiza a aplica\u00e7\u00e3o utilizando objetos que representam elementos do mundo real. Em vez de pensar apenas em fun\u00e7\u00f5es, passamos a modelar clientes, funcion\u00e1rios, ve\u00edculos, produtos, pedidos e qualquer outra entidade existente no sistema. Essa forma de desenvolvimento torna o c\u00f3digo mais organizado, reutiliz\u00e1vel e f\u00e1cil de manter. Al\u00e9m disso, linguagens como o TypeScript adicionam tipagem est\u00e1tica e recursos que tornam esse processo ainda mais seguro e produtivo. O projeto desenvolvido Neste projeto construiremos um sistema simples para gerenciar funcion\u00e1rios de uma oficina automotiva. Teremos diferentes tipos de funcion\u00e1rios, como: Cada um possui caracter\u00edsticas espec\u00edficas, mas todos compartilham informa\u00e7\u00f5es em comum. Esses dados ser\u00e3o exibidos automaticamente na tela atrav\u00e9s da manipula\u00e7\u00e3o do DOM utilizando TypeScript. Al\u00e9m disso, voc\u00ea aprender\u00e1 como organizar um projeto Front-End utilizando uma estrutura muito pr\u00f3xima da encontrada em aplica\u00e7\u00f5es profissionais. Conceitos de Programa\u00e7\u00e3o Orientada a Objetos utilizados Durante o desenvolvimento ser\u00e3o apresentados diversos conceitos fundamentais da Programa\u00e7\u00e3o Orientada a Objetos. Classes As classes funcionam como um molde para cria\u00e7\u00e3o dos objetos. Nelas definimos atributos e comportamentos que ser\u00e3o compartilhados por todas as inst\u00e2ncias. Objetos Os objetos representam os elementos reais do sistema. Cada funcion\u00e1rio possui seus pr\u00f3prios dados, mas todos seguem a estrutura definida pela classe. Heran\u00e7a A heran\u00e7a permite reutilizar c\u00f3digo. Em vez de repetir propriedades e m\u00e9todos em diversas classes, podemos criar uma classe base e especializar apenas aquilo que muda. Essa t\u00e9cnica reduz duplica\u00e7\u00e3o e facilita futuras manuten\u00e7\u00f5es. Polimorfismo O polimorfismo permite que diferentes objetos respondam ao mesmo comportamento de maneiras diferentes. Esse \u00e9 um dos conceitos mais importantes da POO e, ao mesmo tempo, um dos que mais geram d\u00favidas para quem est\u00e1 come\u00e7ando. No projeto ele \u00e9 apresentado de forma totalmente pr\u00e1tica. Interfaces e Types O TypeScript oferece recursos extremamente \u00fateis para aumentar a seguran\u00e7a do c\u00f3digo. Durante o projeto utilizamos Interfaces e Types para definir contratos entre os objetos. Isso reduz erros durante o desenvolvimento e melhora a experi\u00eancia do programador gra\u00e7as \u00e0 verifica\u00e7\u00e3o realizada pelo compilador. Modificadores de acesso Tamb\u00e9m veremos como utilizar: Esses modificadores controlam quais propriedades e m\u00e9todos podem ser acessados por outras partes da aplica\u00e7\u00e3o, tornando o c\u00f3digo mais seguro e organizado. TypeScript no Front-End Muitos desenvolvedores associam o TypeScript apenas ao Angular ou ao React. Na pr\u00e1tica, ele pode ser utilizado em qualquer projeto JavaScript. Neste projeto utilizamos TypeScript puro manipulando o DOM, demonstrando que \u00e9 perfeitamente poss\u00edvel criar aplica\u00e7\u00f5es organizadas mesmo sem frameworks. Essa abordagem fortalece os fundamentos e facilita muito a migra\u00e7\u00e3o posterior para React, Angular ou Vue. Manipula\u00e7\u00e3o do DOM Depois de criar os objetos do sistema, precisamos exibir essas informa\u00e7\u00f5es na interface. Durante o desenvolvimento voc\u00ea aprender\u00e1 como: Tudo isso sem depender de frameworks. Organiza\u00e7\u00e3o do projeto Outro ponto importante apresentado no projeto \u00e9 a organiza\u00e7\u00e3o dos arquivos. Mesmo sendo um projeto relativamente pequeno, utilizamos uma estrutura que facilita futuras expans\u00f5es da aplica\u00e7\u00e3o. Esse tipo de organiza\u00e7\u00e3o aproxima o desenvolvimento dos projetos encontrados no mercado de trabalho. O que voc\u00ea aprender\u00e1 Ao finalizar este projeto voc\u00ea ter\u00e1 colocado em pr\u00e1tica: Mais importante do que decorar c\u00f3digo \u00e9 compreender por que cada conceito existe e quando utiliz\u00e1-lo. Esse entendimento faz toda a diferen\u00e7a quando voc\u00ea come\u00e7a a desenvolver aplica\u00e7\u00f5es maiores. No canal Desvendando o C\u00f3digo, o objetivo \u00e9 sempre ensinar os conceitos por tr\u00e1s da tecnologia. Em vez de apenas copiar c\u00f3digo, voc\u00ea aprende a entender como as ferramentas funcionam e como aplic\u00e1-las na constru\u00e7\u00e3o de sistemas reais. Bons estudos e bons c\u00f3digos!<\/p>\n","protected":false},"author":1,"featured_media":2133,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2132"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2132"}],"version-history":[{"count":7,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2132\/revisions"}],"predecessor-version":[{"id":2141,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2132\/revisions\/2141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2133"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}