Creating a TypeScript frozen set: A step-by-step guide

Question

Creating a TypeScript frozen set: A step-by-step guide

Imagine having a group of values that you want to protect from being edited, as shown below:

// These values should not be editable.
const listenedKeys = new Set(['w', 'a', 's', 'd'])

// This value can be accessed without issues.
const hasA = listenedKeys.has('a')

// Attempting to modify this should cause an error.
listenedKeys.add('r')

Is it possible to make this set immutable in TypeScript? If so, how?

I've attempted using the Readonly utility type, but it did not prevent me from making changes to the set:

const listenedKeys: Readonly<Set<string>> = new Set(['w', 'a', 's', 'd'])

// No errors occur during this operation
listenedKeys.add('r')

typescript

Answer 1

Answer №1

There is native support for this type in TypeScript, known as ReadonlySet. It will prevent any modifications to the set once it has been created.

const listenedKeys: ReadonlySet<string> = readOnlySet(new Set(['w', 'a', 's', 'd']))

Playground Link

If you prefer implicit typing, a small helper function can be created specifically for switching types:

const readonlySet = <T>(set: Set<T>): ReadonlySet<T> => set;

const listenedKeys = readonlySet(new Set(['w', 'a', 's', 'd']))

Playground Link

The definition of this type can be found in the es2015.collection.d.ts file, along with similar types like ReadonlyMap.

Answer 2

There is native support for this type in TypeScript, known as ReadonlySet. It will prevent any modifications to the set once it has been created.

const listenedKeys: ReadonlySet<string> = readOnlySet(new Set(['w', 'a', 's', 'd']))

Playground Link

If you prefer implicit typing, a small helper function can be created specifically for switching types:

const readonlySet = <T>(set: Set<T>): ReadonlySet<T> => set;

const listenedKeys = readonlySet(new Set(['w', 'a', 's', 'd']))

Playground Link

The definition of this type can be found in the es2015.collection.d.ts file, along with similar types like ReadonlyMap.

Answer 3

Answer №2

If you want to create your own custom interface, you can do so by extending an existing one like this:

interface FrozenSet<T> extends Set<T> {
  add: never,
}

class FrozenSet<T> extends Set<T> implements FrozenSet<T> {}

const listenedKeys = new FrozenSet(['w', 'a', 's', 'd'])

// @ts-expect-error
listenedKeys.add('r')

Check out the playground here

Answer 4

If you want to create your own custom interface, you can do so by extending an existing one like this:

interface FrozenSet<T> extends Set<T> {
  add: never,
}

class FrozenSet<T> extends Set<T> implements FrozenSet<T> {}

const listenedKeys = new FrozenSet(['w', 'a', 's', 'd'])

// @ts-expect-error
listenedKeys.add('r')

Check out the playground here

Answer 5

Answer №3

To prevent the add property from being used on the listenedKeys variable, you can create a new type called MyNewSet:

type MyNewSet = Omit<Set<string>, 'add'>;

const listenedKeys: MyNewSet = new Set(['w', 'a', 's', 'd'])

const aPressed = listenedKeys.has('a')

listenedKeys.add('r') // error

Check out this playground link to see it in action: Playground Link

Answer 6

To prevent the add property from being used on the listenedKeys variable, you can create a new type called MyNewSet:

type MyNewSet = Omit<Set<string>, 'add'>;

const listenedKeys: MyNewSet = new Set(['w', 'a', 's', 'd'])

const aPressed = listenedKeys.has('a')

listenedKeys.add('r') // error

Check out this playground link to see it in action: Playground Link

Creating a TypeScript frozen set: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

What exactly does the use of type assertion as any in Typescript entail?

Utilizing MongoDB query for geoLocation with maxDistance parameter

Does a typescript definition file exist for Apple MapKit JS?

Exploring ways to destructure the useContext hook with a null default value in your Typescript code

Encountered an issue during the migration process from AngularJS to Angular: This particular constructor is not compatible with Angular's Dependency

The SonarTsPlugin report is coming back clean with no issues found in the Typescript files

How can users create on-click buttons to activate zoom in and zoom out features in a Plotly chart?

Issues arise when upgrading from Angular 8 to 9, which can be attributed to IVY

The error message "this.startLoginAnimatioon is not defined as a function" popped up

Jest is having difficulty locating a module while working with Next.js, resulting in

What is the relationship between Typescript references, builds, and Docker?

What is causing the failure of the state to be inherited by the child component in this scenario (TypeScript/React/SPFX)?

Is there a more concise method for accepting a collection of interfaces in TypeScript?

Is ConnectionServiceModule not compatible with Angular version 17.2.0?

How can I display images stored locally within a JSON file in a React Native application?

Problem with Anular5 - "this" not functioning correctly inside of ready()

The data type 'Event' cannot be assigned to the data type 'string' in this context

Best practices for extending the Array<T> in typescript

typescript exploring the versatility of dynamic types and generics

Ways to access nested keys in a TypeScript object as well as an array containing objects