What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

Question

What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

I am currently in the process of updating the Paper.js Typings located on GitHub at this repository:

github.com/clark-stevenson/paper.d.ts

Within Paper.js, there exists a MouseEvent class, which is not an extension of JavaScript's MouseEvent, but rather a wrapper with the same name. This presents a challenge when trying to reference JavaScript's built-in MouseEvent while also dealing with a class of the same name.

Since I do not directly instantiate a Paper.js Mouse Event myself, my current temporary solution involves renaming it to PaperMouseEvent:

export class PaperMouseEvent extends Event {
    constructor(type:string, event:MouseEvent, point:Point, target:Item, delta:Point)

    /**
     * JavaScript's mouse event
     */
    event:MouseEvent;
}

Is there a proper way to address this issue, or is this workaround commonly used?

typescript typescript-typings

Answer 1

Answer №1

If you are looking to achieve a specific outcome, it might be as simple as this:

declare module "paper" {
    class MouseEvent extends Event {
        constructor(type:string, event:MouseEvent, point:Point, target:Item, delta:Point);
        event: MouseEvent;
    }
}

Modification

To maintain a reference to the default MouseEvent, you could create a type alias like so:

type NativeMouseEvent = MouseEvent;

declare module "paper" {
    class MouseEvent extends Event {
        constructor(type:string, event:MouseEvent, point:Point, target:Item, delta:Point);
        event: NativeMouseEvent;
    }
}

Answer 2

If you are looking to achieve a specific outcome, it might be as simple as this:

declare module "paper" {
    class MouseEvent extends Event {
        constructor(type:string, event:MouseEvent, point:Point, target:Item, delta:Point);
        event: MouseEvent;
    }
}

Modification

To maintain a reference to the default MouseEvent, you could create a type alias like so:

type NativeMouseEvent = MouseEvent;

declare module "paper" {
    class MouseEvent extends Event {
        constructor(type:string, event:MouseEvent, point:Point, target:Item, delta:Point);
        event: NativeMouseEvent;
    }
}

What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

Answer №1

Modification

Similar questions

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

Checking the parameters passed to a function in Typescript: A step-by-step guide

Sequelize: Query results do not have defined instance methods and properties

Is there a way to insert a secured page right before accessing the dashboard?

The generics in TypeScript for Parameters<URLS[T]> and the corresponding URLS[T] are not compatible

Broadening Cypress.config by incorporating custom attributes using Typescript

Getting the perfect typings installed from DefinitelyTyped

Encountering an error when trying to set data in a Firestore document with a customized JavaScript object: "Invalid data provided for function DocumentReference.set()"

Bringing in SCSS using Typescript, React, and Webpack

How can I position ports on the right side of a graph element in JointJS?

Angular's capability for manipulating data asynchronously

Mongoose does not compare BCRYPT passwords that are empty

Despite encountering the 'property x does not exist on type y' error for Mongoose, it continues to function properly

Encountering difficulties importing an NPM library into StackBlitz

The specified property cannot be found on the Window type and the globalThis typeof

Here's how to retrieve a property from a union type object in Typescript without the need for type casting

Updating token (JWT) using interceptor in Angular 6

Location of the bundled Webpack index.html file while running locally on a Nativescript WebView

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

Creating interfaces within props is essential for defining the structure of components