{"id":2357,"date":"2026-08-24T15:16:16","date_gmt":"2026-08-24T18:16:16","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2357"},"modified":"2026-08-24T15:16:58","modified_gmt":"2026-08-24T18:16:58","slug":"orientacao-a-objetos-com-typescript-classes-objetos-e-estado-na-pratica","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2357","title":{"rendered":"Orienta\u00e7\u00e3o a Objetos com TypeScript: Classes, Objetos e Estado na Pr\u00e1tica"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Aprender <strong>Orienta\u00e7\u00e3o a Objetos com TypeScript<\/strong> \u00e9 uma \u00f3tima maneira de entender como organizar melhor dados e comportamentos dentro de uma aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula pr\u00e1tica do <strong>Desvendando o C\u00f3digo<\/strong>, come\u00e7amos com exemplos simples e evolu\u00edmos passo a passo para <strong>objetos literais, classes, atributos, m\u00e9todos, inst\u00e2ncias, operador <code>this<\/code> e estado<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A proposta \u00e9 entender os conceitos antes de avan\u00e7ar para aplica\u00e7\u00f5es maiores com tecnologias como <strong>React e React Native<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfa5 Assista \u00e0 aula completa<\/h2>\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=\"Orienta\u00e7\u00e3o a Objetos com TypeScript | Classes, Objetos, this e Estado na Pr\u00e1tica\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/-GUo-razELM?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<h2 class=\"wp-block-heading\">Por que utilizar objetos?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine informa\u00e7\u00f5es armazenadas separadamente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let nome = \"Jo\u00e3o\";\nlet email = \"joao@email.com\";\nlet idade = 25;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Funciona, mas conforme o sistema cresce fica mais dif\u00edcil identificar quais informa\u00e7\u00f5es pertencem \u00e0 mesma entidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um <strong>objeto literal<\/strong> permite agrupar esses dados:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const usuario = {\n    nome: \"Jo\u00e3o\",\n    email: \"joao@email.com\",\n    idade: 25\n};<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Agora temos uma estrutura organizada representando um usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 justamente um dos primeiros passos trabalhados na aula: sair de informa\u00e7\u00f5es isoladas e come\u00e7ar a estruturar os dados.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Classes e objetos com TypeScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Depois dos objetos literais, avan\u00e7amos para as <strong>classes<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos pensar em uma classe como um <strong>molde utilizado para criar objetos<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Usuario {\n\n    nome: string;\n    email: string;\n    idade: number;\n\n    constructor(nome: string, email: string, idade: number) {\n        this.nome = nome;\n        this.email = email;\n        this.idade = idade;\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A partir desse molde podemos criar diferentes objetos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const usuario1 = new Usuario(\n    \"Jo\u00e3o\",\n    \"joao@email.com\",\n    25\n);\n\nconst usuario2 = new Usuario(\n    \"Maria\",\n    \"maria@email.com\",\n    30\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada objeto \u00e9 uma <strong>inst\u00e2ncia da classe <code>Usuario<\/code><\/strong>. Esse processo de criar o molde e depois gerar diferentes objetos a partir dele \u00e9 demonstrado passo a passo no v\u00eddeo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entendendo o <code>this<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Outro conceito importante \u00e9 o operador:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Quando utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>this.nome<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">estamos nos referindo \u00e0 propriedade <code>nome<\/code> do objeto atual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse conceito aparece constantemente em Orienta\u00e7\u00e3o a Objetos e entender seu funcionamento facilita bastante o estudo de classes e m\u00e9todos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Estado de um objeto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m trabalhamos o conceito de <strong>estado<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine um produto com estoque inicial:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const produto = {\n    nome: \"Notebook\",\n    estoque: 10\n};<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se uma venda alterar o estoque para 8, o objeto continua sendo o mesmo, mas seu <strong>estado mudou<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa ideia ajuda inclusive a criar uma ponte com conceitos encontrados posteriormente no <strong>React e React Native<\/strong>, como o gerenciamento de estado. Essa rela\u00e7\u00e3o tamb\u00e9m \u00e9 abordada durante a aula.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que voc\u00ea aprender\u00e1 na aula?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ao longo do v\u00eddeo trabalhamos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TypeScript \u2022 Objetos Literais \u2022 Classes \u2022 Objetos \u2022 Atributos \u2022 M\u00e9todos \u2022 Constructor \u2022 <code>this<\/code> \u2022 Inst\u00e2ncias \u2022 Estado<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tudo constru\u00eddo de forma progressiva e com exemplos pr\u00e1ticos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Entender <strong>Orienta\u00e7\u00e3o a Objetos com TypeScript<\/strong> n\u00e3o significa apenas decorar a sintaxe de uma classe.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O objetivo \u00e9 compreender como podemos <strong>organizar dados, definir comportamentos e criar estruturas reutiliz\u00e1veis<\/strong> para desenvolver aplica\u00e7\u00f5es cada vez maiores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 estudando <strong>TypeScript, React ou React Native<\/strong>, dominar esses fundamentos vai facilitar bastante os pr\u00f3ximos passos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprender Orienta\u00e7\u00e3o a Objetos com TypeScript \u00e9 uma \u00f3tima maneira de entender como organizar melhor dados e comportamentos dentro de uma aplica\u00e7\u00e3o. Nesta aula pr\u00e1tica do Desvendando o C\u00f3digo, come\u00e7amos com exemplos simples e evolu\u00edmos passo a passo para objetos literais, classes, atributos, m\u00e9todos, inst\u00e2ncias, operador this e estado. A proposta \u00e9 entender os conceitos antes de avan\u00e7ar para aplica\u00e7\u00f5es maiores com tecnologias como React e React Native. \ud83c\udfa5 Assista \u00e0 aula completa Por que utilizar objetos? Imagine informa\u00e7\u00f5es armazenadas separadamente: Funciona, mas conforme o sistema cresce fica mais dif\u00edcil identificar quais informa\u00e7\u00f5es pertencem \u00e0 mesma entidade. Um objeto literal permite agrupar esses dados: Agora temos uma estrutura organizada representando um usu\u00e1rio. Esse \u00e9 justamente um dos primeiros passos trabalhados na aula: sair de informa\u00e7\u00f5es isoladas e come\u00e7ar a estruturar os dados. Classes e objetos com TypeScript Depois dos objetos literais, avan\u00e7amos para as classes. Podemos pensar em uma classe como um molde utilizado para criar objetos. A partir desse molde podemos criar diferentes objetos: Cada objeto \u00e9 uma inst\u00e2ncia da classe Usuario. Esse processo de criar o molde e depois gerar diferentes objetos a partir dele \u00e9 demonstrado passo a passo no v\u00eddeo. Entendendo o this Outro conceito importante \u00e9 o operador: Quando utilizamos: estamos nos referindo \u00e0 propriedade nome do objeto atual. Esse conceito aparece constantemente em Orienta\u00e7\u00e3o a Objetos e entender seu funcionamento facilita bastante o estudo de classes e m\u00e9todos. Estado de um objeto Tamb\u00e9m trabalhamos o conceito de estado. Imagine um produto com estoque inicial: Se uma venda alterar o estoque para 8, o objeto continua sendo o mesmo, mas seu estado mudou. Essa ideia ajuda inclusive a criar uma ponte com conceitos encontrados posteriormente no React e React Native, como o gerenciamento de estado. Essa rela\u00e7\u00e3o tamb\u00e9m \u00e9 abordada durante a aula. O que voc\u00ea aprender\u00e1 na aula? Ao longo do v\u00eddeo trabalhamos: TypeScript \u2022 Objetos Literais \u2022 Classes \u2022 Objetos \u2022 Atributos \u2022 M\u00e9todos \u2022 Constructor \u2022 this \u2022 Inst\u00e2ncias \u2022 Estado Tudo constru\u00eddo de forma progressiva e com exemplos pr\u00e1ticos. Conclus\u00e3o Entender Orienta\u00e7\u00e3o a Objetos com TypeScript n\u00e3o significa apenas decorar a sintaxe de uma classe. O objetivo \u00e9 compreender como podemos organizar dados, definir comportamentos e criar estruturas reutiliz\u00e1veis para desenvolver aplica\u00e7\u00f5es cada vez maiores. Se voc\u00ea est\u00e1 estudando TypeScript, React ou React Native, dominar esses fundamentos vai facilitar bastante os pr\u00f3ximos passos.<\/p>\n","protected":false},"author":1,"featured_media":2358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1,21],"tags":[],"class_list":["post-2357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-javascript"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2357","targetHints":{"allow":["GET"]}}],"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=2357"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2357\/revisions"}],"predecessor-version":[{"id":2360,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2357\/revisions\/2360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2358"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}