In my code, there is an ES6 class called User and a global function named map():
class User {
constructor(public name: string) {}
}
const map = <T, R>(project: (value: T) => R) => {}
Instead of the usual way of calling map like this:
map((value) => new User(value))
I am curious if it's possible to do something like this:
map(new User)
I am unsure whether this approach is feasible. Any thoughts?
To enhance your class, you can implement a static function that receives the value parameter and generates a fresh User instance:
class User {
static generateUser(value) {
return new User(value)
}
}
You can then proceed to utilize it like this:
map(User.generateUser)
If you want to achieve this, it cannot be done directly. One approach is by controlling the target function instead of using the stock map function. In this case, you can modify the function to take a constructor as an argument:
class User { constructor(private id: number) { }}
function map<TIn, T>(value: TIn, ctor: new (a: TIn) => T): T{
return new ctor(value)
}
map(10, User)
Alternatively, you can utilize a helper function that transforms the constructor into the desired function. While this method may not offer significant brevity compared to the original solution, it provides more flexibility:
class User { constructor(private id: number) { }}
function ctor<TIn, T>(ctor: new (a: TIn) => T): (value: TIn) => T{
return value => new ctor(value)
}
[10, 11].map(ctor(User));
To ensure that a function is called with the 'new' keyword, you can use the new.target check. If the function is not called with 'new', you can then call the function with new.
function Person(name) {
if (!new.target) return new Person(...arguments);
this.name = name;
}
var names = ['Jane', 'Dan', 'Grace', 'Paul'],
instances = names.map(Person);
console.log(instances);The concept you are referring to is known as a scope-safe constructor. This approach involves modifying a constructor so that it can function both with and without the use of the new keyword.
interface User {
name: string;
}
interface UserConstructor {
new (name: string): User;
(name: string): User;
}
A similar technique is employed for built-in objects such as Array and Date.
The key is to determine whether the new keyword was utilized:
const User = function (this: User | void, name: string): User {
if (!(this instanceof User)) {
return new User(name);
}
this.name = name;
return this;
} as UserConstructor;
This modification makes your class independent of the use of new.
console.log(
new User('Bob'),
User('Alice'),
);
As a result, we can now write:
['Alice', 'Bob'].map(User); // $ExpectType User[]
The ongoing debate between object-oriented programming and functional programming in JavaScript often brings up the issue of class constructors versus function constructors.
With ES6 classes requiring the use of the new operator, it becomes tricky to do something like map(new User).
To work around this limitation, a common approach is to create a wrapper around the class constructor that allows instances to be created through a function call. One effective method, as suggested by @baboo, is shown below:
class MyClass {
// ...
static create(...args) {
return new MyClass(...args)
}
}
const a = new MyClass('hello', [])
const b = MyClass.create('world', 123])
To delve deeper into the challenges posed by the new operator, you can refer to this article.
For those interested in exploring alternative solutions, consider looking into daggy - Library for creating tagged constructors.
In case you are in need of a universal remedy and unable to alter the specified classes, one option is to employ a higher-order function:
function create(class) {
return (...parameters) => new class(...parameters);
}
// Instead of:
map((value) => new User(value));
// You can use:
map(create(User));
Update: Find the complete solution at the end of this answer. Consider the following code snippet: @Injectable() export class FileUploader { constructor(private http: Http) {} upload(url: string, file: File) { let fileReader: FileReader ...
My situation involves an external library known as Y, which was installed using npm and loaded from the node_modules directory. This library is hosted on GitHub and currently being utilized in my project in the following manner: import { X } from 'Y& ...
After creating a shape in Three.Js by combining a curved plane and two flat planes, I encountered an issue. While the vertical plane and curved plane blend seamlessly, there is a noticeable harsh line where the horizontal plane meets the curve. The lightin ...
I'm currently grappling with coding a recursive function, specifically one that involves "Tree Recursion". I could really use some guidance to steer me in the right direction. To better explain my dilemma, let's consider a basic example showcasi ...
Recently diving into Meteor, I am on a mission to create my own customized version of this impressive example from leaflet incorporated into Meteor: Interactive Choropleth Map The implementation requires the use of this GeoJson Data file: us-states The o ...
I'm currently working on a project that has two different themes, and I have the ability to switch between them based on the environment. Everything works perfectly, but I'm encountering an issue with paths. Some pages should open with different ...
i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...
I'm facing an issue with my MQTT connection. It works fine in nodeJS, but when I try to use it in a React component, I encounter the following error: Error during WebSocket handshake: net::ERR_CONNECTION_RESET I've tried looking for solutions r ...
I am currently working on a function that performs database operations, with the implementation contained within a try/catch block. Here is an example: async function update({id, ...changes}): Promise<IUserResult> { try { //insert code here retu ...
Retrieving data from firestore: const [product, setProduct] = useState([]); const fetchProducts = async () => { const querySnapshot = await getDocs(collection(db, "products")); const productsArray = []; querySnapshot.forEach((doc) => { ...
To keep things simple, I'm looking to create a visibility toggle effect on a div when someone hovers over an anchor tag. Similar to the behavior of the four buttons on this example link: The issue I'm facing is that I want the div to appear or b ...
I'm trying to create a responsive menu with menus and submenus using JQuery. However, as a newbie to JQuery, I'm struggling to hide a previous submenu when displaying another one. Here's the CodePen link Below is the HTML code: <nav cl ...
Within my renderUpgrades-function, I handle the options of an item by including them in radio-button-groups. Each item has multiple options and each option has its own radio-button-group. Typically, a radio-button-group can be managed using useState, wit ...
Having trouble sending data from Flask to JavaScript. I have the information from the database and added it to a dictionary. Now, I want to convert this data into a JSON object in JavaScript to display it on a map. Despite using JSON.parse in JavaScript, i ...
Encountered a MongoNetworkError: failed to connect to server [localhost:27017] on first connect [Error: connect ECONNREFUSED 127.0.0.1:27017 If I reinstall MongoDB, the code works fine. However, I am looking for a permanent solution. [error:MongoNetworkE ...
My Setup: I've written some basic code snippet below: const onSuccess = () => { console.log('success'); } const onError = () => { console.log('error'); } navigator.geolocation.getCurrentPosition(onSuccess, onError) ...
I am facing an issue with a button that, when clicked, adds a new media item to a list. The problem is that it uses unique IDs that end up getting duplicated. I am looking for a solution to add some kind of anonymous number to the ID to prevent duplication ...
I am currently experimenting with a template driven form in Angular, but I encountered an error stating **There is no directive with “exportAs” set to “ngForm"** I have made sure to import FormsModule and ReactiveFormsModule in app.module.ts as well ...
I have several parent div elements with pairs of button and div child elements. My goal is to apply changes to the corresponding div when a button is clicked. For example, clicking Button 2 should only affect toast 2. However, I am facing an issue where o ...
I recently set up a Next.js project with typescript using create-next-app. Opting for Pino as the logging library, recommended by Next.js, seemed like the logical choice. Initially, when I utilized Pino without incorporating its transport functionality, e ...