Typescript's Set Type does not include an isSubsetOf method

I am looking to utilize sets as they are implemented in MDN with TypeScript. I have the most recent version of TypeScript installed in my package:

"typescript": "^5.4.5"

and my tsconfig includes:

"lib": ["dom", "es2022"],

However, when I write:

const set1:Set<number> = new Set([1,2])
const set2:Set<number> = new Set([1,2,3])
set1.isSubsetOf(set2)

I encounter the error:

Property 'isSubsetOf' does not exist on type 'Set<number>'.ts(2339)

I attempted to define my own interface:

interface Set<T> {
 add(value: T): this;
 clear(): void;
 delete(value: T): boolean;
 forEach(
    callbackfn: (value: T, value2: T, set: Set<T>) => void,
    thisArg?: any
 ): void;
 has(value: T): boolean;
 intersection(value: Set<T>): this;
 isSubsetOf(value: Set<T>): this;
 readonly size: number;
}

This approach works when the definition is in the same file, but importing it from another file results in the same error. Is there a way to override the default definition for Sets in TypeScript?

My tsconfig:

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "lib": ["dom", "es2022"],
    "jsx": "react-jsx"
  }
}

My package.json:

{ 
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "React and TypeScript example starter project",
  "keywords": [
    "typescript",
    "react",
    "starter"
  ],
  "main": "src/index.tsx",
  "dependencies": {
    "loader-utils": "3.2.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "typescript": "^5.4.5"
  },
  "scripts": {
   "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer №1

The latest Set features are now part of the ECMAScript standard in stage 3 and will soon be available in all major browsers.

In response, TypeScript has recently introduced these new types: https://github.com/microsoft/TypeScript/issues/57228

These types will be included in the upcoming release of version 5.5.0. However, to use them, you must set the "target" in your TypeScript compiler options to "esnext".

For further information and to try out these new features, visit the Playground Link.


A suggestion mentioned in the comments is to create a custom .d.ts file defining the new type globally. You can create a file named set.d.ts (ensure it is detected by your TS config) and add the following content:

declare global {
    interface Set<T> {
        isSubsetOf<T>(other: ReadonlySet<unknown>): boolean
    }
}

// this empty export is necessary for it to function correctly
export {};

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

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

Using Jquery to trim the data returned from the server response

Utilizing asp.net for obtaining the server response via JQuery AJAX in JSON format has been my approach. I've experimented with both JQuery.getJSON() and typical jQuery response methods, followed by conversion to JSON format using $.parseJSON. Howeve ...

Choose all of the markers on the Google Map

for (i = 0; i < locations.length; i++) { var image = new google.maps.MarkerImage( 'logo.png', null, // size new google.maps.Point( 0, 0 ), // origin new google.maps.Point( 24, 48 ), // anchor (move to cente ...

Ways to insert a line break within a jQuery function using text()

I am looking to add a new line in my jQuery function. $.ajax({ url:"http: //192.168.1.4/Experiements/webservices/api.php", type:"GET", dataType:"json", data:{type:"login", UserName:userId,Password:userPassword}, ...

Wordpress Ajax Login Issues - Error Code 302

I am currently working on implementing a basic Ajax Login system using Wordpress. However, I have encountered an issue where my system fails every time the "wp_signon" function is triggered, and the only feedback I receive is as follows: POST myurl/wp-adm ...

Shadows are displaying properly on a cube within Three.js, but they are not appearing on a JSON mesh

I'm having trouble getting my racecar to cast a shadow on the floor. While the cube is successfully casting a shadow, the imported json mesh object racecar is not. I'm wondering if this has something to do with the json file baking on the materia ...

How to send MySQL data as a local variable to inline JavaScript in Node.js with Jade?

Within my Node script, I have the following code: var connection = mysql.createConnection(...); connection.connect(); connection.query(/*sql query*/, function(err, rows, fields){ app.get('/', function(req, res){ res.render('index&ap ...

"The challenge of achieving a transparent background with a PointMaterial texture in ThreeJS

When creating a set of particles with THREE.Points and using a THREE.PointMaterial with texture, I noticed that the transparency of the particles is working only partially. The textures are stroke rectangles created with canvas. Here is what my particles ...

Using state in a ReactJS and Rails Ajax request

I am currently working on a ProductItem component that triggers an AJAX post call to create a basket item when the user clicks 'Add to Basket'. Despite setting state correctly in the Product Item component, I am facing an issue where I am unable ...

What is the reason for the 'admin' page not being displayed?

After reading the MEAN MACHINE Book and following the instructions on Routing Node applications [pg - 36], I encountered an issue. The express.Router()⁴⁸ functions as a mini application where you can define routes. Let's see an example by adding ...

Progressive rendering of a substantial mesh using three.js

How can I efficiently render a large static mesh in three.js, even if it's 2 GB with tens of millions of polygons? My plan is to stream the mesh geometry buffers into indexedDB and render them progressively to the screen, all while maintaining an int ...

Pattern to identify digits from 0 to 9 along with specific symbols

I am currently in the process of creating a regular expression that can match 0 to 9 (up to 10 digits) and /-. (0 to 2 max), without having to be all . or all //. It can be /.\- or .-. or any combination of the three, with a maximum of two of those ch ...

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

typescript error when using redis client's del function

After encountering an issue with Redis types definitions where delete functions were not accepting any arguments, I attempted to call them within my NodeJS application. However, I received this error message: Expected 0 arguments, but got 1.ts(2554) To r ...

Issue with Vue - accessing chrome.webstore.install function: "Cannot read property 'install' of undefined"

I'm attempting to utilize the inline installation feature on my extension website. The site is built using vue, and I am facing difficulty in invoking the chrome.webstore.install() function. Whenever I try, I encounter this error message: "vue.runtime ...

Unveiling the Key to Utilizing $children in Vue 3 to Develop a Tabs Component

I am currently working on developing a Tabs component using Vue 3, similar to the one discussed in this relevant question. <tabs> <tab title="one">content</tab> <tab title="two" v-if="show">conten ...

To-do list application: organizing tasks into local storage for easy access

Struggling to make a todo-app function properly with localstorage, I'm a bit lost on the process. The app is built within a Vue.js project using a main.js file that connects two Classes: App.js and Todo.js (see below). import App from "./classes/ ...

Establish a preferred gas fee for a web3 transaction

Currently, I am utilizing the following approach to engage with my contract and initiate a transaction: contract.methods.myMethod(amount).send({ from: address, to: CONTRACT_ADDRESS, value: String(totalCost), }); I have observed that .send ...

Error: Unable to access unknown properties (reading 'extend')

Struggling to integrate the Vuetify library into my current Vue 3 project, encountering complications. An error message popped up post-compilation: vuetify.js?ce5b:42021 Uncaught TypeError: Cannot read properties of undefined (reading 'extend') ...

Cannot find property 'keys' in the given data. Destructure the 'keys' property from the data object

I keep encountering an error related to the mentioned title when using this TypeScript middleware: (target: es6, module commonjs) try { const response = await fetch(URL); if (response.status !== 200) { throw 'request no ...