Is there a way in TypeScript to prevent the modification of a class property and still trigger a runtime error if attempted?

Question

Is there a way in TypeScript to prevent the modification of a class property and still trigger a runtime error if attempted?

I currently have the following code snippet:

class Computed<Value> {
  _value: Value;

  get value(){
    return this._value;
  }
}

When attempting to set the value property, TypeScript returns an error message:

Cannot assign to value because it is a read-only property.

While this behavior is acceptable, I am wondering if it is feasible to introduce a runtime check that throws an Error when someone attempts to modify the value. Is this achievable?

typescript

Answer 1

Answer №1

When using JavaScript strict mode (either through the "use strict" directive or in contexts where strict mode is always enabled, like inside classes), attempting to assign to a getter-only property will result in a runtime error. This means that your code will trigger the expected runtime error:

"use strict";

class Computed<V> {
    _value: V;
    constructor(v: V) {
        this._value = v; // Added for easier initialization
    }
    get value() {
        return this._value;
    }
}

const v = new Computed(123);

v.value = 2; // error
// compile-time error: Cannot assign to 'value' because it is a read-only property.
// also, RUNTIME ERROR! 💥 TypeError: setting getter-only property "value"

If the above is not satisfactory, you can explicitly create a setter that throws your desired error, especially since TypeScript 5.1 introduced support for unrelated types for getters and setters. The getter type remains the same, while the setter requires the impossible "never" type to prevent compile-time calls:

class Computed<V> {
    _value: V;
    constructor(v: V) {
        this._value = v;
    }
    set value(x: never) {
        throw new TypeError("hey, don't do that")
    }
    get value(): V { // Explicit return type annotation
        return this._value;
    }
}

const v = new Computed(123);
v.value = 2; // error
// compile-time error: Type 'number' is not assignable to type 'never'.
// also, RUNTIME ERROR! 💥 TypeError: hey, don't do that

Playground link to code

Answer 2

When using JavaScript strict mode (either through the "use strict" directive or in contexts where strict mode is always enabled, like inside classes), attempting to assign to a getter-only property will result in a runtime error. This means that your code will trigger the expected runtime error:

"use strict";

class Computed<V> {
    _value: V;
    constructor(v: V) {
        this._value = v; // Added for easier initialization
    }
    get value() {
        return this._value;
    }
}

const v = new Computed(123);

v.value = 2; // error
// compile-time error: Cannot assign to 'value' because it is a read-only property.
// also, RUNTIME ERROR! 💥 TypeError: setting getter-only property "value"

If the above is not satisfactory, you can explicitly create a setter that throws your desired error, especially since TypeScript 5.1 introduced support for unrelated types for getters and setters. The getter type remains the same, while the setter requires the impossible "never" type to prevent compile-time calls:

class Computed<V> {
    _value: V;
    constructor(v: V) {
        this._value = v;
    }
    set value(x: never) {
        throw new TypeError("hey, don't do that")
    }
    get value(): V { // Explicit return type annotation
        return this._value;
    }
}

const v = new Computed(123);
v.value = 2; // error
// compile-time error: Type 'number' is not assignable to type 'never'.
// also, RUNTIME ERROR! 💥 TypeError: hey, don't do that

Playground link to code

Is there a way in TypeScript to prevent the modification of a class property and still trigger a runtime error if attempted?

Answer №1

Similar questions

"String representation" compared to the method toString()

What are the best practices for transpiling code using Parcel-bundler?

Increasing the number of service providers in Angular2-4 directives

Mapping properties between objects in Typescript: transferring data from one object to another

Autodesk Forge serves as a hub for hosting dependencies on a nearby server

Emphasize the search term "angular 2"

There is no 'next' property available

Associate union with interface attributes

The sequence of execution in React hooks with Typescript

Utilizing Array Notation in Typescript to Retrieve Elements from Class

What is the process of deploying Angular Server Side Rendering (SSR) build files to Azure Web App service using FileZilla FTP?

Ways to convert an asynchronous operation to synchronous in JavaScript

TypeScript application was constructed with incorrect imports from the src folder instead of the dist folder

a guide on accessing key value elements within an array using Ionic 3

Webpack and React.js: Additional loaders might be required to manage the output generated by these loaders

Display corresponding JSON images of items within an *ngFor loop in Angular

Creating Beautiful MDX Layouts with Chakra UI

What's the best way to refactor the `await nextEvent(element, 'mousemove')` pattern in my code once it is no longer necessary?

Material-UI - TypeScript - Autocomplete utilizing getOptionLabel and renderOption for optimized selection functionality

"Exploring the process of retrieving URL parameters within an activated link using Angular 7 and executing a REST API call from a service