A missing Array.at() method has been reported in TypeScript array type

Question

A missing Array.at() method has been reported in TypeScript array type

When I try:

const myArray = [0,4,2];
myArray.at(-1);

I encounter the following error related to .at

The error message reads: Property 'at' does not exist on type 'number[]'.ts (2339)

Why is Array.at() not working in this case? Is there a specific browserlist value that needs to be set in order for TypeScript to recognize and enable this recently specified feature?

Here is more information about Array.at() on MDN.

This is the content of my tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

arrays typescript typescript-typings

Answer 1

Answer №1

The Array.prototype.at() method is now a part of ES2022, unfortunately missing the cut for inclusion in TypeScript 4.5. However, it has been confirmed that it will be included in TypeScript 4.6, set to be officially released as of today, February 22, 2022.

const myArray = [0,4,2]
myArray.at(-1); // this is valid

Click here for Playground link using TS4.6.1-RC

Answer 2

The Array.prototype.at() method is now a part of ES2022, unfortunately missing the cut for inclusion in TypeScript 4.5. However, it has been confirmed that it will be included in TypeScript 4.6, set to be officially released as of today, February 22, 2022.

const myArray = [0,4,2]
myArray.at(-1); // this is valid

Click here for Playground link using TS4.6.1-RC

Answer 3

Answer №2

It seems that even when specifying

"lib": "esnext"

, it still doesn't work as expected (check here).

For the time being, you can manually achieve this by creating your own definitions file to enhance the array interface (as detailed here):¹

declare interface Array<T> {
   at(index: number): T | undefined;
}

This will make it functional for now (see here).

In a very short amount of time (edit: it appears to be very short, refer to jcalz's answer), you should be able to remove this once TypeScript includes it in the ESNext target (and subsequently in the ES2022 target once the specification is officially adopted in June; since the proposal is currently at Stage 4 it will be implemented in the next snapshot).

¹ There's a case to be made for using index?: number instead of index: number, since the specification explicitly addresses situations where converting the argument to a number results in NaN by recommending the use of 0 (at utilizes ToIntegerOrInfinity on the argument, which substitutes accordingly). Therefore, according to the specification, [10].at() would return 10. Hopefully, they adhere to the stricter definition.

Answer 4

It seems that even when specifying

"lib": "esnext"

, it still doesn't work as expected (check here).

For the time being, you can manually achieve this by creating your own definitions file to enhance the array interface (as detailed here):¹

declare interface Array<T> {
   at(index: number): T | undefined;
}

This will make it functional for now (see here).

In a very short amount of time (edit: it appears to be very short, refer to jcalz's answer), you should be able to remove this once TypeScript includes it in the ESNext target (and subsequently in the ES2022 target once the specification is officially adopted in June; since the proposal is currently at Stage 4 it will be implemented in the next snapshot).

¹ There's a case to be made for using index?: number instead of index: number, since the specification explicitly addresses situations where converting the argument to a number results in NaN by recommending the use of 0 (at utilizes ToIntegerOrInfinity on the argument, which substitutes accordingly). Therefore, according to the specification, [10].at() would return 10. Hopefully, they adhere to the stricter definition.

A missing Array.at() method has been reported in TypeScript array type

Answer №1

Answer №2

Similar questions

Is there a way to switch an element across various pages within Ionic 3?

Tips for displaying an array of objects in a single <li> tag in React

I hope to retrieve a specific string from an array using PHP

Display all items that contain a specified string using JavaScript

How do I implement a dynamic input field in Angular 9 to retrieve data from a list or array?

Unable to bring in a TypeScript library that was downloaded from a GitHub fork repository

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

Changes in model not reflected in the view

Cross-component communication in Angular

What could be causing the peculiar behavior I am experiencing when a child component attempts to display values from an object fetched in the parent component?

Issue with rendering images retrieved from JSON data

Guide on integrating Amazon S3 within a NodeJS application

How can a parent component update a child component's prop value in VUE?

Retrieve the unique identifier of a single post from a JSON file within a NuxtJS project

What could be causing my array elements to be printed twice in C#?

Implementing ngFor to group values within div containers according to specific keys

Incorporating Kekule.js into a TypeScript-based React application

Developing OnIdle with rxjs

Store prefabricated objects in an array

Fast + Vue3 + VueRouter Lazy Load Routes According to Files