Implement a function in a prototype that can be accessed globally, regardless of the module it is contained in

Trying to extend the functionality of the Array prototype in Typescript (1.8) through a module.

The modification to the prototype is being made in utils.ts file:

declare global {
    interface Array<T> {
        remove(obj: any): void;
    }
}

Array.prototype.remove = function(obj) {
    var idx = this.indexOf(obj);
    if (idx > -1) {
        this.splice(idx, 1);
    }
}

Now, the goal is to implement this change globally in the main.ts file like this:

import {Array<T>.remove} from "./utils.ts"

let arr = ["an", "array"];
arr.remove("array");

While it's possible to import the interface declaration, the modification to the Array prototype is not reflected in the main.ts file. How can the prototype be altered and globally apply that "remove" functionality or somehow import it?

Answer №1

Here is a solution that I found successful:

test.ts:

export {};

declare global {
    interface Array<T> {
        remove(obj: any): void;
    }
}

Array.prototype.remove = function(obj) {
    var idx = this.indexOf(obj);
    if (idx > -1) {
        this.splice(idx, 1);
    }
}

test2.ts:

import "./test";

let arr = ["an", "array"];
arr.remove("array");
console.log(arr);

Compile and run:

tsc -m "commonjs" ./test2.ts
node ./test2.js

Output:

[ 'an' ]

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

Resource loading unsuccessful: server encountered a status of 500 (Internal Server Error)

I'm struggling to figure out why I keep getting an Internal Server Error when trying to call a web service in my HTML page using JavaScript and Ajax. Here is the error message: Failed to load resource: the server responded with a status of 500 (Int ...

Tips for eliminating the trailing slash from the end of a website article's URL

I've recently delved into learning Gatsby, and I've encountered an issue with the Open Graph tag in my project. The og:image is displaying a different image than the intended thumbnail for the article. Here's an example article - . When try ...

I struggle to format a classic HTML form dropdown menu that is populated using JavaScript

Hey everyone, I'm having an issue with styling a drop down menu that is populated by JavaScript. I've tried different things but nothing seems to be working. Any suggestions on how I can style the elements in the drop down? <form action="" me ...

Discover the simple steps to generating dynamic variables with jQuery!

I am looking to dynamically create jQuery variables based on values in a loop. Here is an example of what I am trying to achieve. array=["student","parent","employee"] $.each(user_types, function( index, value ){ var dynamicType = value + "_type"; // t ...

What is the best way to transfer information to a different component using Vue router?

At the moment, I have a component that is displayed on the page. When I check the this.$router variable inside this component, I notice that the full path property is '/hello/reports?report=3849534583957' and the path property is '/hello/rep ...

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

Express.js throwing an unexpected 404 error

I'm really struggling to understand why Node (express) only renders the index page and returns a 404 error for other pages, like "comproAffitto" in this example. In my app.js file: var index = require('./routes/index'); var comproAffitto= ...

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

I'm currently working on a situation where I have the following code: <div ng-repeat="i in MediaFeedItems | filter: { category: 'userSelect' }" class="mediafeed--item"> This specific code snippet is responsible for iterating through ...

Is there a way to extract values from a particular object?

Currently, I am utilizing a JSON server to establish a straightforward login system. The data stored on the server is structured as follows: { "users": [ { "name": "user1", "password": "pass1", "email": "<a href="/cdn-cgi/l/emai ...

Switch between different table rows

I have here a table that is used for displaying menu and submenu items. It's a mix of PHP (to fetch the menu items and their respective submenus) and HTML. What I am trying to figure out is how to toggle the visibility of only the submenu items under ...

Using VueJS to determine if a certain string includes a specific substring within an if-statement embedded within a v

I am aiming to verify if the link in a json object contains 'http'. If it does, I want to assign a target='_blank' attribute to the v-btn. The link could also be something like #test. Currently, this is how I am attempting to achieve i ...

What are some effective ways to test asynchronous functions in React?

Looking for help to test async/Promise based methods in React components. Here is a simple example of a React component with async methods: import server from './server'; class Button extends Component { async handleClick() { if (await ca ...

Display and conceal box using AngularJS checkboxes

I am currently facing some challenges in managing checkboxes and containers. The main objective is to have a list of checkboxes that are pre-selected. Each checkbox corresponds to a specific container, and when the checkbox is checked or unchecked, it shou ...

Local modules vs production modules in npmWhen working with npm

We are developing two modules that are dependent on another module. The relationship is like A -› B and C -› B I have explored some possible solutions: Using npm link ../projectC from projects A, B Pros: Creates a symlink, so any changes made t ...

I'm encountering an issue trying to apply array filtering with checkboxes using React hooks and TypeScript

Help needed! I'm facing an issue while trying to filter an array based on gender using checkboxes. The functionality works fine for the male checkbox but seems to fail when clicking on the female checkbox. Below is the code snippet from my App.tsx fil ...

Tips for waiting for an Http response in TypeScript with Angular 5

Is it possible to create a function that can retrieve a token from a server, considering that the http.post() method generates a response after the function has already returned the token? How can I ensure that my function waits for the http.post() call t ...

Adding TypeScript definition file to an npm package: A step-by-step guide

Is it possible to include typescript definitions (.d.ts files) in a pure javascript project without using TypeScript itself? I'm struggling to find any information on how to do this directly in the package.json. ...

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

Sending data from an Angular application using AJAX to FormSpree.io

Currently, I am using a jQuery script to send ajax requests to for static form submission. The documentation provided by FormSpree suggests the following approach: $.ajax({ url: "//formspree.io/<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

How to Capture Clicks on Any DOM Element in React

Currently working on a web project using React and Node. My goal is to monitor all clicks across the entire document and verify if the previous click occurred within a 2-minute timeframe. ...