<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Fernando Gustavo</title>
    <description>The latest articles on Forem by Fernando Gustavo (@fernandogbs).</description>
    <link>https://forem.com/fernandogbs</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F907906%2Fed28fd22-9c43-4365-9c89-b0cb16e19da5.png</url>
      <title>Forem: Fernando Gustavo</title>
      <link>https://forem.com/fernandogbs</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/fernandogbs"/>
    <language>en</language>
    <item>
      <title>Existe imutabilidade no JS/TS? Como funciona?</title>
      <dc:creator>Fernando Gustavo</dc:creator>
      <pubDate>Wed, 12 Nov 2025 20:36:37 +0000</pubDate>
      <link>https://forem.com/fernandogbs/existe-imutabilidade-no-jsts-como-funciona-5fmm</link>
      <guid>https://forem.com/fernandogbs/existe-imutabilidade-no-jsts-como-funciona-5fmm</guid>
      <description>&lt;p&gt;E aí, galera!&lt;/p&gt;

&lt;p&gt;Resumindo e dando a resposta, que é um pouco contraintuitiva para quem vem de outras linguagens, não, não existe imutabilidade garantida no tempo de execução do JavaScript ou TypeScript. Mas o TypeScript nos oferece alguns caminhos para forçar essa prática e te avisar dos erros antes que teu código rode.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; &lt;br&gt;
Mas é algo interessante.&lt;/p&gt;

&lt;p&gt;Vou te mostrar o motivo por trás disso e como usar o TypeScript para escrever um código muito mais seguro e fácil de entender.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A raiz do problema:&lt;/strong&gt; &lt;em&gt;JavaScript é mutável por natureza&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;O JavaScript foi construído com a ideia de mutabilidade para a maioria dos seus tipos de referência, como por exemplo, objetos e arrays.&lt;/p&gt;

&lt;p&gt;Quando usamos &lt;code&gt;const&lt;/code&gt;, a única coisa que garantimos é que a variável não será reatribuída. O conteúdo do objeto ou array que ela aponta na memória pode ser alterado livremente:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Fernando&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;languages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// O objeto interno foi alterado, e o TS não reclama.&lt;/span&gt;
&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;languages&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em projetos grandes, se você passa esse objeto para várias funções (em um componente React, por exemplo), qualquer função pode mudar ele sem aviso, gerando um side effect por exemplo. A imutabilidade é a prática de sempre criar uma nova cópia ao invés de alterar o original, mas o JavaScript não te obriga a isso.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A solução:&lt;/strong&gt; &lt;em&gt;TypeScript&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;O TypeScript atua como um sistema de tipos rodando em tempo de compilação. Ele usa isso para nos dar opções que obrigam a imutabilidade como uma regra, não como um recurso da linguagem.&lt;/p&gt;




&lt;p&gt;O uso do modificador &lt;code&gt;readonly&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Essa é a forma mais simples de definir que a propriedade não pode mudar. Se alguém tentar, o compilador vai retornar erro:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Pedido&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// &amp;lt;-- não poderia ser modificado&lt;/span&gt;
  &lt;span class="nl"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;      
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;meuPedido&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Pedido&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;22&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Pendente&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;meuPedido&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;23&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// erro de compilação que bloqueia rodar o código&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Uso do utility type &lt;code&gt;Readonly&amp;lt;T&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Se você quer que todas as propriedades de um tipo ou interface sejam imutáveis, você usa o Utility Type Readonly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Settings&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;darkMode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;language&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// transforma todas as chaves em 'readonly'&lt;/span&gt;
&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ConfigApp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Readonly&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Settings&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;darkMode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// vai retornar erro&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;code&gt;as const&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Para configurações e valores que nunca devem mudar, o as const é o ideal. Ele não só torna o objeto readonly, mas também transforma os valores em Tipos Literais. Isso significa que o valor do type é o próprio tipo.&lt;/p&gt;

&lt;p&gt;Como por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ERROR_CODES&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;NOT_FOUND&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;404&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;SERVER_ERROR&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;UNAUTHORIZED&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;401&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Objeto:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ERROR_CODES&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// retorna o objeto acima&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Tipo literal de not found:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ERROR_CODES&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NOT_FOUND&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Tipo literal de not found:  404 &lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Tipo literal de server error:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ERROR_CODES&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;SERVER_ERROR&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Tipo literal de server error:  500 &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Como conclusão, nós podemos afirmar que, basicamente imutabilidade no JS é mais uma prática.&lt;/p&gt;

&lt;p&gt;O TS não faz seu JavaScript se comportar como Rust ou C++. O que o TypeScript garante é a consistência e a segurança dos seus dados em tempo de desenvolvimento, impedindo que esses bugs cheguem ao ambiente de execução.&lt;/p&gt;

&lt;p&gt;Em sistemas de grande escala onde a mutabilidade pode ser um pesadelo, saber desses pontos pode ter dar previsibilidade.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>typescript</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Test Post</title>
      <dc:creator>Fernando Gustavo</dc:creator>
      <pubDate>Fri, 12 Aug 2022 22:41:00 +0000</pubDate>
      <link>https://forem.com/fernandogbs/test-post-167m</link>
      <guid>https://forem.com/fernandogbs/test-post-167m</guid>
      <description>&lt;p&gt;test post&lt;/p&gt;

</description>
      <category>test</category>
    </item>
  </channel>
</rss>
