What is the best way to create an "ArraySimilar" class using TypeScript?

Question

What is the best way to create an "ArraySimilar" class using TypeScript?

Can someone guide me on creating an ArrayLike class in TypeScript?

Edit: Got the solution from @jcalz, it's working perfectly for me.

class CustomArray<T> implements ArrayLike<T> {
  length: number
  [index: number]: T
}

typescript typescript-typings

Answer 1

Answer №1

Classes can have index signatures just like any other object type. When you specify that a class has a number index signature (as mandated by the definition of ArrayLike<T>), the compiler allows you to access and modify properties of the class values using numeric indices:

class FooList<T> implements ArrayLike<T> {
    length: number
    [n: number]: T
    constructor(init: T[]) {
        this.length = init.length;
        for (let i = 0; i < init.length; i++) {
            this[i] = init[i];
        }
    }
}

const fooList = new FooList(["a", "b", "c"]);
console.log(fooList.length) // 3
console.log(fooList[0]) // "a"

Keep in mind that without enabling the --noUncheckedIndexedAccess compiler flag, the compiler assumes that there is a defined value at every possible numeric index, even though many of these properties will be undefined:

fooList[12345].toUpperCase() // no compiler error, but
// 💥 RUNTIME ERROR! fooList[12345] is undefined

However, this behavior is similar to regular arrays:

const arr: string[] = ["a", "b", "c"];
arr[12345].toUpperCase() // no compiler error, but
// 💥 RUNTIME ERROR! arr[12345] is undefined

Therefore, it is not a significant issue.

Link to Playground for code

Answer 2

Classes can have index signatures just like any other object type. When you specify that a class has a number index signature (as mandated by the definition of ArrayLike<T>), the compiler allows you to access and modify properties of the class values using numeric indices:

class FooList<T> implements ArrayLike<T> {
    length: number
    [n: number]: T
    constructor(init: T[]) {
        this.length = init.length;
        for (let i = 0; i < init.length; i++) {
            this[i] = init[i];
        }
    }
}

const fooList = new FooList(["a", "b", "c"]);
console.log(fooList.length) // 3
console.log(fooList[0]) // "a"

Keep in mind that without enabling the --noUncheckedIndexedAccess compiler flag, the compiler assumes that there is a defined value at every possible numeric index, even though many of these properties will be undefined:

fooList[12345].toUpperCase() // no compiler error, but
// 💥 RUNTIME ERROR! fooList[12345] is undefined

However, this behavior is similar to regular arrays:

const arr: string[] = ["a", "b", "c"];
arr[12345].toUpperCase() // no compiler error, but
// 💥 RUNTIME ERROR! arr[12345] is undefined

Therefore, it is not a significant issue.

Link to Playground for code

What is the best way to create an "ArraySimilar" class using TypeScript?

Answer №1

Similar questions

What is the best way to outline the specifications for a component?

Incorporating a JavaScript file into Angular

Achieve top-notch performance with an integrated iFrame feature in Angular

Enhance existing functionalities in library with type augmentation strategy

How can I utilize identical cucumber steps for both mobile and web tests while evaluating the same functionality?

Managing errors when dealing with Observables that are being replayed and have a long lifespan

The error message 'tagName' is not a valid property for type ChildNode in Typescript

Deduce the argument type of a class from the super call

Solutions for resolving the issue of not being able to load images when using merged-images in JavaScript

Tips for incorporating a fresh variant into the default typography of MUI using TypeScript

Encountered an error during npm installation: Fetch Package Metadata error occurred while attempting to request from http://registry.npmjs.org/concurrently, the cause being a socket hangup

Here is the revised text: "What is the best way to send a variable to a component and retrieve it within the ng-template using

Sign up for the observable, retrieve the asynchronous mapped outcome with input from the dialog, and then utilize the outcome from the map

Utilizing the useState hook with generics in React for efficient data management

Angular/Typescript: develop a factory function that creates objects based on the parent class's properties

Angular: Identifier for Dropdown with Multiple Selection

Error: The property '...' is not found in the ReactElement<any, any> type, but it is required in the type '{...}'

The resolution of Angular 8 resolver remains unresolved

Adding a new line in the configurations of MatDialogConfig (Angular)

Mastering TypeScript in Router Configuration