Is it possible to define a global class in TypeScript without repeating code?
The following approach doesn't seem to work:
declare global {
class A {
hi() { return "hi" }
}
}
export {}
As a result, I had to resort to repeated code usage. You can test this here.
declare global {
class A {
hi(): string
}
}
(window as any).A = class A {
hi() { return "hi" }
}
export {}
Sorry, I can't seem to find a perfect solution for this issue. Without something similar to microsoft/TypeScript#39504, some level of duplication may be inevitable.
One potential approach is outlined below, with a set amount of extra work involved. This could be beneficial if your class definition contains more than just a couple of methods or properties:
const _A = class A {
hi() { return "hi" }
}
declare global {
var A: typeof _A
interface A extends InstanceType<typeof A> { }
}
window.A = _A; // or globalThis.A = _A;
export { }
Initially, you define your class as A and assign it to another variable called _A. By utilizing typeof _A, you reference the type of the class constructor and incorporate it into your global scope. Class declarations introduce both a named value for the constructor and a named type for the instance, so augmenting the global scope with a class expression and typeof necessitates manual handling. This explains why the constructor uses var and the instance type requires an interface.
(If TypeScript were to include a typeof class feature as discussed in microsoft/TypeScript#41581, this process might become smoother, but until then, this is the most effective method).
It's important to note that the interface A type employs the InstanceType<T> utility type; while generally reliable, there are certain edge cases such as generic classes that may warrant further testing in your specific scenarios.
Once the global scope recognizes the global A class, assigning the _A constructor to it becomes seamless.
To assign a new property (let's call it A class) to the global object window, use the following code:
declare global {
class A {
hi(): string
}
interface Window { AClass: A; }
}
window.AClass = window.AClass || {};
window.AClass.hi();
I am currently working on a simple SharePoint web part and encountering an issue with using a function from another module file in my main file. Snippet from the JSFunctions.module.js file (where I define my function): function getApi(){ [my code]... }; ...
The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...
One of my server components fetches and displays data only when the user is authorized: function CheckAuthorization() { const isAuthenticated = // check if user is authorized return ( <div> {isAuthenticated ? ( <DisplayAutho ...
I want to combine two identical type observables in Angular2 and return an observable of the same type in a function. My goal is to: transform this setup: obs1.subscribe(obs => console.log(obs)) (where I receive): { count: 10, array: <some ...
As a newcomer to jasmine and test cases, I am endeavoring to create test cases for my JavaScript code in fiddle. However, I'm encountering an error: Uncaught SyntaxError: Unexpected identifier Could you guide me on how to rectify this issue? Below is ...
When working with TypeScript, I prefer to use snake_case for properties within my Interfaces or Types. To enforce this rule, I have configured the ESLint rule camelcase as follows: 'camelcase': ["error", {properties: "never"}], Even though the E ...
Within my coding project, I've devised an interface that includes various dynamic keys for API routes, along with the corresponding method and response structure. interface ApiRoutes { "auth/login": { POST: { response: { ...
I am faced with the following scenario where I need to filter an array of objects based on lineId, subFamily, and status. My current code successfully filters based on lineId, but now I also need to include a condition for subFamilyId. I have two specifi ...
No matter what I've tried, I can't seem to fix the error that keeps occurring. An uncaught error is popping up, saying that the environment variable NEXT_PUBLIC_SANITY_DATASET is missing. http://localhost:3333/static/sanity-5377bc10.js:4605 ...
Organizational structure: src - components - About.tsx In an attempt to optimize performance, I am experimenting with lazy loading: const About = React.lazy(() => import('components/About')); However, Visual Studio Code is flagging &ap ...
While I am able to successfully utilize my types in .ts files, I am facing difficulties in understanding why it's failing in .test.ts files, even though both files are located in the same folder. Check out the code in the .ts file below: https://i.s ...
Within my React application, I am retrieving data from an API using the following code snippet: function PlayerPage() { interface PlayerDataType { id: number; handle: string; role: string; avatar: string; specialAbilities: null; s ...
Is there a way to configure an MUI input field so that it only accepts letters, numbers, and dashes while excluding spaces and symbols such as (*&^%$#@!,.<>{}[])? Specifically, I want to allow characters that wouldn't disrupt a URL, like . Tha ...
Recently delved into Angular 2 and encountered an unusual issue. I kicked off using the Angular 2 Quickstart repository on GitHub and incorporated some components with templates. For example: import { Component } from '@angular/core'; import { ...
Currently, I am working on a Next.js project. In the mobile view, my navigation menu utilizes a modal to toggle the navbar. However, I have encountered an issue where when I click on a navigation link, the data gets dismissed but the link itself does not n ...
I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...
I am facing an issue with an external library named "gapi" that is set to a property on the window object as window.gapi. I would like to keep it there while using the @types/gapi declaration. Is there a way to achieve this, like the following code snippet ...
Currently using Apollo-Server/TypeScript with graphql-tool's makeExecutableSchema() to set up schema/directives. Encountering an error while attempting to add a basic GraphQL Directive: TypeError: Class constructor SchemaDirectiveVisitor cannot be in ...
I am new to RXJS and looking for a way to drag an HtmlElement when the user presses the space key and then drags the element with the mouse. The dragging should be initiated by either pressing the SPACE key followed by a left click, or vice versa. The dra ...
type ExtractKeyType<T extends string, K extends number> = `${T}.${K}`; type PathImpl<T, Key extends keyof T> = Key extends string ? T[Key] extends readonly unknown[] ? ExtractKeyType<Key, 0 | 1> : T[Key] extends Record<str ...