Typescript - `willSet` e `didSet` com decorators 
Tags: typescript, decorators, observer
Published: 2020-07-09 20:46:14

<strong>EDITADO(1):</strong> Atualizei o exemplo para permitir o uso de `@willSet()` e `@didSet()` em sequência
<strong>EDITADO(2):</strong> Atualizei o exemplo para invocar `@willSet` das superclasses depois e `@didSet` das superclasses antes
<strong>EDITADO(3):</strong> Agora foi 

Achei no [Github](https://github.com/) uma lib bem interessante, chamada [classy](https://github.com/1amageek/classy), para observar mutações em propriedades de forma similar à linguagem [Swift](https://medium.com/the-andela-way/property-observers-didset-and-willset-in-swift-4-c3730f26b1e9) usando [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html). Ela é mais abrangente, fornecendo os decorators `@classy` para a classe e `@property` para as propriedades, com a possibilidade de definir `get` e `set` também. Eu queria algo mais simples, sem a necessidade de decorar a classe, sem `get` e `set` e usando diretamente os decorators `@willSet` e `@didSet`. O link com o código e exemplos está [aqui](https://www.staging-typescript.org/play?#code/PQKhCgAIUhlBbgtgIwPYBtUGdIGNWIAOAhgE4AuAlugBbEAm2kAppJfcwHZUBmluDJoWaZInAq3rFIhUqlmVmUjgDooIYOHycs5SAGtmAT1hGUGHAF4xzAO6QAssUIAeXaUqcA5gBpIWMzR0AD4ACgBKcHBQCGhIACVmXABXYVJpVH8kIMySdMhpXDoAN1ZmLGFcSj4BKUhUZLwPaWTEaXFi6SxWTgBjzOYAD0pdSlI1OIABPOJEA2NIADkJSDrZeQ8lBmYJjXAeZM5cKlROSC9mclNzdFDDIwAuf3IPb3CngJvIAG9wAEh0Jd5iZAhhINZ7tcglgVBdyHdjJF-tVIKEAISQ0HocI-f5-TE3GHdeH3PwEoLguBYhFGcKRP4AXyif1Il2SpDO5Iw4CZMXUCSSqWY+VyHkQzDGmTanEohGS6EEpBkpAAlwBaRDJKScADn0iGI3IXCNYmkAEPSMVUKzVqwAAbkMhwu27SDTMizSCO0hwyAABTk5AAz1RCJkusK2Eb0oxdpoDkcTmc4QAxMa6ADq1HQsEuoW9cKexE4RjJxihGA+WPekBTh2OlFOkAAPpBDhw+JwlLiAUDbNnc+QnnXE42zq328xO0pmYwe39++gc0DrAXLgBtLnoAC6AH4VIv0Hi13pV07LioAPqX9bkVDX-5Mhc0aisdGHweQABkX695-ISIsmyHKQB+lw8tEYD8okKRpBkyqUOKkqQNKsryoqMhBlgGpasWeosMMujGj05qWtakj2ieLr8u66RzCe-qBiGsrhv4kaUNGghxvs9ZJuclxpqQugACLsIO+b-kWJZliCNxVjcNYjg2TYTpwHaeN2vy9no9BiZcw68WOLZtmpU4afQs6ZFpfy6fQn5nj6F7aO4yTHNam7llie4qLZx7-pSJ5Xjegb3pej7-LYL6AqiaK2Z+P5-o5AHMqy5DsmccXgbyUFxMJSTWi0bTKhsijKBReAKlg3QFF2gzFnOrQocWaEKowSoAI7JKw3SkGaBGCo6c6YF44bcOUqzSOKWBFT1KGoLpNQMMQ3FDGGFCQAmylnGB8J0GpgKkE8oRdrYABqxDoF1Um0uCwSQFa7A1sWRg9ql6UbYZTYSUl11+OsaTkEYADSxgfC8ni+LaWC4B4hB3odjHyMKgN5dDsPw8Zk7TvQOLWSioQcGjsrw7jeJ-OQNByPYJ2QAAoqQcikBEeJMnizl6FulJwhWtz-cjwOImzpy6P4QqkFmS72fx5CCZmA55ieMk8-Sfzs16L5YBLy6nh9o6nPmGtPKgyAAFZJOQfgnedl3MNduOQHt9AHSoAhLgbIyW3Y1tdeEADcotpFrg77q7twUx7NhnRdPuQE+qvC3oJ6iXZK6JXCLsJ6Qrnwx5slBN5tkFDgSl8ap6ldhZflJRnOgvNn7lbtulLfKB2ZPOHmvyxbqzsO3-7J5+rN-H8ADypvmz5ZldgGSMUEY31wn9cgAwLpbzn8cIROvQFpSBHe5zz25kwyPhk8Sx1e9Hts1Td1nD2rGD0N7rCrhrB9ecyw-kxrQdORdYca09lHG2Kth770bpSK2V8ybk37npcgId-7uywH4R+z9QEnzJtoPgXh2TEGQICduWdmAs3pEybKsQYB5XwPkVo0h-qbDKraCqxAqqsGLEMeqmRGqoTlK1a0kBOrdWFH1IYA1BCQGGuGQgWECgoXKDNSMiB5rVH4EtFagw1p6E2nxTKu16oHSOmgq+dtbr3VQI9a6r1gJnB0UZBe+kb5L1noDEGjxnivEhoTGGxNrRPBnivVGPi4YCLLlPJQpNh7428eja0kSwGU1QNTOwdMGbWmZsPIe8da7Ah5lzS4PNQh8znm4lWassBiwHqnVM6ZyBVPhIrXJ1YhY5I7vUykdj9YdyNuPY4qD0BPxMTfe2FS0j1MQW7Du-TBkgP9o7Z2odkHTPQbHFpIsTy-x1oFdmWc3KkHfjcbyh4i61k+uOEy5cZxV3Tjs+u+yIHWBboePuSVNl+Fsu3DW7SsljzNscSe04An8wcd3YprjjB+DvpveJw83p7zfo3Y+p8v7nygTbUxd9ski2MTbAKCLPKHM-mA-8myJkAIjmin2MDwEEvzpAy+NtqVfPgS7JBUz6gDPQUirBpwcF4IIdfOuJDMlkJ5EAA)

Esse recurso é útil quando a propriedade não precisa ser computada mas tem efeitos colaterais. Isso evita a necessidade de criar um `setter` para os efeitos colaterais e uma propriedade armazenada de nome similar que será atribuída pelo `setter` antes de manipular os efeitos colaterais.