Creating a Proxy for an Array in TypeScript: A Step-by-Step Guide

Question

Creating a Proxy for an Array in TypeScript: A Step-by-Step Guide

When attempting to utilize a Proxy for adding logic whenever a value in my array is set to a new value, I encountered an issue with TypeScript. The error arises from the fact that TypeScript does not support indexing an array with anything other than a number.

const nums = [1, 2, 3, 4, 5];

const handler: ProxyHandler<number[]> = {
  set(target: number[], property: string | symbol, newValue: any) {
    target[property] = newValue;
    return true;
  },
};

const proxy = new Proxy(nums, handler);

Specifically, I am receiving the error

Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)

when trying to assign a new value with target[property] = newValue;.

I am now seeking advice on how to resolve this issue and make TypeScript happy. Any suggestions or solutions would be greatly appreciated.

arrays typescript proxy

Answer 1

Answer №1

Are arrays indexed with strings? No, arrays are generally indexed with numbers, as indicated by TypeScript.

const numbers = [1, 2, 3, 4, 5];

const arrayHandler: ProxyHandler<number[]> = {
  set(target: number[], property: string | symbol | number, newValue: any) {
    if (typeof property !== 'number') throw new Error('You can only index an array with a `number`!')
    target[property] = newValue;
    return true;
  },
};

const proxyArray = new Proxy(numbers, arrayHandler);

Playground Link

Answer 2

Are arrays indexed with strings? No, arrays are generally indexed with numbers, as indicated by TypeScript.

const numbers = [1, 2, 3, 4, 5];

const arrayHandler: ProxyHandler<number[]> = {
  set(target: number[], property: string | symbol | number, newValue: any) {
    if (typeof property !== 'number') throw new Error('You can only index an array with a `number`!')
    target[property] = newValue;
    return true;
  },
};

const proxyArray = new Proxy(numbers, arrayHandler);

Playground Link

Creating a Proxy for an Array in TypeScript: A Step-by-Step Guide

Answer №1

Similar questions

Error Uncovered: Ionic 2 Singleton Service Experiencing Issues

Compare an integer variable with numbers that have been previously saved in an array

Express: issue retrieving numbers from request body array

The global declaration of Typescript is only accessible within the node_modules/@types directory

Issue with updating Class Module type array

Issue with React TypeScript: Only the first state update takes effect, despite multiple updates being made

applying multiple angular filters on table column values

Issue when rendering <options> while looping through country object in the country list

Eslint is unable to locate file paths when it comes to Solid.js tsx extensions

When attempting to publish an index.d.ts file using npm, the module is

What is the correct way to close an ngx-contextmenu in an Angular application?

Grabbing specific inline JSON data with jQuery's .getJSON function or a comparable method

Tips for fixing the issue of 'expect(onClick).toHaveBeenCalled();' error

Monitor and compile numerous directories simultaneously in TypeScript (monorepo)

Using TypeScript's generic rest parameters to form a union return type

Loop through each object and add them to an array in a file using NodeJS

Transforming an array of Instagram photos into an array specifically consisting of chosen photos

It's conceivable that the item is 'null'

Is there a way to fetch a particular object from Firebase database based on its value using AngularFire2?

Showing a JSON array response on a TextView without including the array name