Can someone help me understand how to tell TypeScript that a function returns instances of a specified class?
class A extends HTMLElement {
color: 'white'
}
function builder<T extends typeof HTMLElement>(classParam: T) {
let instance = new classParam()
return instance
}
let instance = builder(A)
instance.color = 'black'
// Property 'color' does not exist on type 'HTMLElement'
Is there a way to achieve this without using type assertion?
I have addressed and provided solutions to the issues:
class A extends HTMLElement {
color: string = 'white' // you specified "white" as the type,
// but I assume you intended to assign the value "white" (and specify the type as `string`)
}
function builder<T extends HTMLElement>(classParam: { new(): T }) : T {
// previously:
// - The use of `typeof` in the generic constraint is incorrect
// - The parameter could not be of type `T`, as it would prevent using `new`. It now represents a constructor creating a `T`
// - We are now returning `T` instead of the implicit `any`
let instance = new classParam()
return instance
}
let instance = builder(A)
instance.color = 'black'
Access the playground
I am currently working on a Typescript project that utilizes JQuery, specifically for uploading a form with a file using the JQuery Form Plugin. However, after the upload process, there seems to be an issue when trying to call the "done" function from JQue ...
class Registry<Inst, Ctor extends new (...args: unknown[]) => Inst, T extends Readonly<Record<string, Ctor>>> { constructor(public records: T) { } getCtor<K extends keyof T>(key: K) { return this.records[key] } getIns ...
I am currently storing correlations on Google Firebase in a structure that resembles the following: {a: {a: 1.0, b: 0.6, c: -0.3, ...}, b: {a: 0.6, b: 1.0, c: -0.5, ...}, ...} My goal is to efficiently retrieve a complete correlation matrix while also hav ...
Trying to grasp the concept of async/await, I am faced with the following code snippet: class AsyncQueue<T> { queue = Array<T>() maxSize = 1 async enqueue(x: T) { if (this.queue.length > this.maxSize) { // B ...
Check out the StackBlitz Demo here In my attempt to implement redux toolkit setup for next js based on guidance found here, I encountered a slight difference in the tsconfig.json where the original question had compilerOptions.strict = false while mine is ...
Within my Angular project, I am currently utilizing the following code snippet: this.swUpdate.available.subscribe(() => { ... }); While this code functions correctly, it does generate a warning regarding the deprecation of activated. How can I addre ...
I have a wrapper function that calls an async function: function fetchAPI(arg1: number, arg2: number, arg3: string) { return new Promise((resolve, reject) => { try { myFetchFunction(arg1, arg2, arg3).then((r: any) => { if (!r) { ...
Currently, I am working on integrating the Algolia Places functionality into my next.js project using TypeScript. To begin, I executed npm install places.js --save Next, I inserted <input type="search" id="address-input" placeholder ...
As a newcomer to Angular and programming in general, I am facing an issue with changing the background image of my Page using the setInterval method. The intended behavior is for it to change every second, but for some reason, it changes much faster than t ...
In the process of designing a landing page, I encountered a challenge with incorporating a date picker feature. My goal is to have users select a date and then be redirected to another page upon clicking a button. The technology stack includes NextJS where ...
working with mariadb npmjs version: 2.1.2 import mariadb from "mariadb"; const pool = mariadb.createPool({host: process.env.DBHOST, user: process.env.DBUSER, password: process.env.DBPASS, port: process.env.DBPORT, connectionLimit: process.env.DBCONNLIMIT, ...
Hey there! I have a typescript code snippet that looks like this: import { getConnection } from "typeorm"; import { GraphQLClient } from "graphql-request"; import got from "got"; import database from "./utils/database&quo ...
Exploring the world of typescript (2.5.2) and looking for clarity on why the first call works but the second one encounters an error: function printPerson(person: {firstName: string; lastName: string}): void{ console.log(person.firstName + " " + per ...
I'm facing a challenge. Is it possible to resolve a component manually with just its name known? Let's say I have a string variable that holds the name of a component, like "UserService". I've been exploring Injector and came across method ...
I am currently working on an angular2 website with a root module and a sub level module. However, I have noticed that whatever modules I include in the root module must also be re-included in the sub level module, making them not truly reusable. This is w ...
I've encountered a problem with mysql while using serverless-mysql in TypeScript. It seems like my query might be incorrect. Here is how I am constructing the query: export default async function ExcuteQuery(query: any, values: any) { try { ...
Using "@types/express-serve-static-core": "4.17.13", the augmentation of express-serve-static-core is functioning properly: import { Request, Response, NextFunction } from 'express' import { PrismaClient } from '@prisma/c ...
Trying to create clickable lines between nodes using Pixi has been a bit of a challenge for me. To ensure the line is clickable, I've extended it in an object that incorporates Container. The process involves finding the angle of the line given two p ...
I have a good understanding of the unknown type in TypeScript. I am dealing with untrusted input that is typed as unknown, and my goal is to verify if it contains a truthy value under the key input.things.0. function checkGreatness(input: unknown) { retu ...
I am trying to set authentication headers for images called from an image tag (<img>). To achieve this, I have created a custom pipe named secureimages using the command ionic g pipe secureimages. This pipe intercepts the HTTP requests in an interce ...