The functionality of TypeScript's .entries() method is not available for the type 'DOMTokenList'

I'm currently working with a stack that includes Vue3, Vite, and TypeScript. I've encountered an issue related to DOMTokenList where I'm trying to utilize the .entries() method but TypeScript throws an error saying 

Property 'entries' does not exist on type 'DOMTokenList'

Below is a snippet from my tsconfig file:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "main.d.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": ["./node_modules/@types", "src/core/types"],
    "ignoreDeprecations": "5.0",
    "lib":["DOM","ESNext"]
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

In addition, I am attempting to use the .enties() function for extending DOMTokenList like so:

DOMTokenList.prototype.removeStartWith = function(prefix:string){
    this.remove(...Array.from(this.entries()).map(([,c]) => c).filter(c => c.startsWith(prefix)))
}

I have already tried utilizing previous ECMAScript versions (ES2019) without success. If you have any suggestions on how to resolve this issue, I would greatly appreciate it. Thank you!

javascripttypescriptvue.jsvite

Answer №1

After taking into consideration @jcalz's input, I included the "DOM.Iterable" library and successfully resolved the issue. It turns out, my assumption that the "DOM" library contained "Iterable" was incorrect.

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "main.d.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": ["./node_modules/@types", "src/core/types"],
    "ignoreDeprecations": "5.0",
    "lib":["DOM","DOM.Iterable","ESNext"]
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having difficulty in receiving accurate speech recognition through the microphone while using the Azure Speech to Text service in a

I developed a code in React JS to extract text from speech using the microphone, but unfortunately it is not able to recognize or identify the speech. I have tried various options but all efforts seem to be in vain as no errors are being shown. const start ...

javascriptreactjsspeech-recognitionspeech-to-textazure-speech

What is the best way to delay JavaScript execution until after React has finished rendering?

Perhaps this is not the exact question you were expecting, but it did catch your attention :) The issue at hand revolves around the fact that most of the translations in my text do not update when the global language changes. Specifically, the translation ...

javascriptreactjsi18nextreact-i18next

Transferring information to the server with JSON in the Codeigniter framework

I have a JavaScript array (unitdata_set) that I need to send to the server for database processing using Codeigniter. JavaScript Array (unitdata_set):- [{"unit_id":"13","unit_title":"Testsdsdf","unit_max_occupancy":"3","unit_no":"1","unit_no_adults":"1", ...

javascriptphpjsoncodeigniter

Is there a way I can replace this for loop with the array.some function?

I am looking to update the filterOutEmails function in the following class to use array.some instead of the current code. export class UsertableComponent { dataSource: MatTableDataSource<TrialUser> createTableFromServer = (data: TrialUsers[], ...

arraystypescriptfunctional-programming

Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

Despite checking numerous sources online, I am facing a persistent issue with my Angular application. The problem arises when using HttpClient along with an Angular interceptor to set headers for authentication in my Java Rest API using JWT tokens. The int ...

angularspringtypescriptspring-bootspring-security

An application built with Vue.js featuring various layouts such as a login interface, a page layout, and a sign-up screen

After generating a project using vue-cli, I noticed that the project comes with an App.vue file which serves as the main layout of the app. However, I need a completely different layout for the login page, with different wrappers and body classes. The prob ...

vue.jsvue-router

What is the best way to assign multiple values to certain elements within an array?

I have an array that looks like this: items = { item1: 10, item2: 5, item3: 7, item4: 3, }; I am looking to include additional details in this array, for example: items = { item1: 10 {available: true}, ...

javascriptjson

Specializing Generic Types in Typescript

I'm interested in exploring specialization within Typescript generics, allowing for implementations to vary based on specific type criteria. Here's a simple illustration: const someFunction = <A>() => { return 0; } // something simila ...

typescriptgenerics

"I'm encountering an issue with Passport.js where req.isAuthenticated is throwing an error as not

Recently I started working with node and express, along with passport.js for building an authentication feature. However, I encountered an issue while using a middleware function called "checkNotAuthenticated" in my routes. The error message I received was ...

javascriptnode.jsexpresspassport.js

Is there a way to leverage JavaScript to click on one div and modify the settings of another div simultaneously?

I am struggling with my code which has unnecessary information. <div> <div id="one" class="button"></div> <div id="two" class="button"></div> </div> <div> <div class="Home tab"> < ...

javascriptjqueryhtmlcss

Nightwatch failing to locate element within iFrame

I'm currently facing a challenge when trying to access an element within an iframe. Despite successfully switching to the frame, Nightwatch keeps returning "element not found" whenever I attempt to verify its presence or visibility. Below is a snippe ...

javascriptcssiframenightwatch.js

Using Express-session in the Internet Explorer browser

When configuring the express-session plugin, I follow this setup: var express = require('express'), session = require('express-session'), uuid = require('node-uuid'); var expiration_day = new Date('9/15/2015&apo ...

javascriptnode.jssessioncookiesexpress

Switching from callback to function in TypeScript

Currently, I am utilizing the mongodb driver to establish a connection with mongo: public listUsers(filterSurname?:string):any { if (this.connected) { debug.log(this.db); var results; this.db.collection(' ...

mongodbtypescript

What is the best way to skip certain steps within a Promise using Bluebird?

Here is an example of some code: Queues.findOne({_id: id}) .then(function(q) { var status = q.status; //... }).then(function(q) { // A }).then(function(q) { // B }).then(function(q) { // C }).then(function(q) { // D }).then(function(q) { // E }).then ...

javascriptnode.jspromisebluebird

Improving the Speed of ASP.NET TreeView

How can we optimize performance when using the TreeView component? When I say optimize performance, I am referring to reducing the number of client-server trips, such as postbacks. Does this imply that the majority of the business logic will need to be i ...

asp.netjavascriptperformancetreeviewpostback

Is there a way to use Javascript to launch a new page on my website?

I'll do my best to provide a clear explanation of what I need. Take a look at this: My website is filled with a plethora of news articles, all retrieved from the MySQL database using select * from table_name. Displaying so much news on one page can ...

javascriptjqueryhtmlmysqljsp

Obtaining the dimensions of each individual child component within an NgTemplate

I have the following code snippet within my template. While I can iterate through its components using `get`, it does not return an object that allows me to access deeper into the HTML attributes. <ng-template #container></ng-template> Compon ...

angulartypescriptangular9

Learn how to effectively transfer data from $.getjson to PHP, specifically through the use of Laravel's @foreach loop

$.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1') .done(function( json ) { $(tar).closest('.accordion').children('div').text(json); }); I have successfully obtaine ...

phpjavascriptjqueryjsonlaravel-4

Utilize the index of a for loop to manipulate an Angular string

When working with different objects and creating forms simultaneously, I've come across a challenge. My initial idea for handling the submission was to use the following code: <form (ngSubmit)="submitForm{{u}}()"> However, incorporating the in ...

angulartypescript

Incorporate JavaScript to include a new class and attribute

Apologies for any language barriers.. I grasp that it involves using addClass and removeClass, but I am uncertain about how to write the terms. I need to ensure that if the screen resolution is less than 768 pixels, then the attributes id="dLabel" type="b ...

javascriptjqueryhtmlcss