/* Code Comments */

Property Accessors And Typescript

October 28, 2019

Came across an interesting example of a rarely used feature (at least for me) in Javascript creating unexpected results with Typescript: dynamic property accessors.

Property Accessors (dot and bracket notation) are not always side-effect free.1 For example, getters there’s nothing limiting a getter from mutating a value before it’s retrieved.

If you’re using Typescript and you want to assure Typescript that the value being accessed is the same each time, you need to assign it to a variable (e.g., val in the example below). That’s how to communicate to Typescript that the value is the same each time it’s referenced.

Here’s a simple example to demonstrate how getters and setters can overwrite the property values:

class C {
  i = 0
  get q() {
    return ++this.i
  }
  set q(val) {
    this.i = val
  }
}

const c = new C()
console.log(c.q) // 1
console.log(c.q) // 2
console.log(c.q) // 3
console.log(c.q) // 4

const val = c.q // static assignment
console.log(val) // 5
console.log(val) // 5

c.q = 10 // setter
console.log(c.i) // 10

Footnotes


Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!