Is it feasible to make references to interfaces from an extended interface in Typescript?

Question

Is it feasible to make references to interfaces from an extended interface in Typescript?

I had the idea of enhancing all interfaces in HTMLElementTagNameMap with chained functionality. Since there are numerous interfaces, and all elements either are HTMLElement or extend it, I wanted a way to achieve something like this:

interface HTMLElement {
    doSomething<K extends keyof HTMLElementTagNameMap>(anArgument: any): HTMLElementTagNameMap[K]
}

Unfortunately, this approach doesn't work as expected. This is because every interface that extends HTMLElement now includes a doSomething method that should return any value from HTMLElementTagNameMap. What I actually want is for HTMLTableElement.doSomething to return an HTMLTableElement object, and HTMLDivElement.doSomething to return an HTMLDivElement object, and so forth.

Can such generalization be accomplished, or do I need to repeat this process for each individual interface?

If it is possible, how can I go about implementing it?

typescript typescript-generics typemaps

Answer 1

Answer №1

To achieve the desired outcome, you may want to consider implementing a return type of this.

For a practical demonstration, check out this demo:

interface HTMLElement {
    foo(): this;
}

const a = document.createElement("a");

// ...

const aFoo = a.foo();
//    ^^^^
// HTMLAnchorElement

// ...

In the demo provided above, you can easily identify the resulting type by hovering over the variable that received the output of calling the method.

Answer 2

To achieve the desired outcome, you may want to consider implementing a return type of this.

For a practical demonstration, check out this demo:

interface HTMLElement {
    foo(): this;
}

const a = document.createElement("a");

// ...

const aFoo = a.foo();
//    ^^^^
// HTMLAnchorElement

// ...

In the demo provided above, you can easily identify the resulting type by hovering over the variable that received the output of calling the method.

Is it feasible to make references to interfaces from an extended interface in Typescript?

Answer №1

Similar questions

Error: The next.config.js file contains invalid options - The root value includes an unexpected property

Is it possible for me to exclude generic parameters when they can be inferred from another source?

Setting the root directory and output directory can be a bit tricky when dealing with source code scattered across multiple folders. Here's

Achieving asynchronous results in the parent function with TypeScript: a guide

What causes Next.js to struggle with recognizing TypeScript code in .tsx and .ts files?

Creating a personalized NPM package: Converting and exporting TypeScript definitions

What could be causing the countdown timer to speed up unexpectedly?

Prevent the page from closing by implementing a solution within the ionViewWillLeave method

a guide on accessing key value elements within an array using Ionic 3

What is the best way to specify the return type in TypeScript when there is a possibility of multiple types?

What could be causing the "no exported member" errors to appear when trying to update Angular?

Display customizable template according to variable

Unexpected expression after upgrading to TypeScript 3.7.2 was encountered, file expected.ts(1109)

Testing the branch count of optional chaining in Typescript

Transform a standard array of strings into a union string literal in TypeScript

Tips for bringing in a text file within a NodeJS application using TypeScript and ts-node during development

Errors caused by Typescript transpilation only manifest on the production server

Vite encounters issues when using PNPM because of import analysis on the `node_modules/.pnpm` package

filtering an array based on a specific property will result in the original array remaining

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components