Interact.js: Can I Use Interact In Typescript?

[Louis-7]

Actually I want to use Interact in Angular 2. But I don't know how to use Interact in it or use Typescript to develop it.

Can anyone tell me a possible way to use it with Typescript or Angular 2?

[taye]

It should be the same as using any other JavaScript library. There's nothing in interact.js that's specific to Typescript or Angular.

[grofit]

Could you provide a simple typescript example? as I am trying to do:

import * as interact from "interactjs";

interact(someElement)
   .draggable({...});

Just keep getting the error:

Cannot invoke an expression whose type lacks a call signature. Type '{ default: InteractStatic; on(opt: "cancel" | "dragend" | "dragenter" | "dragleave" | "dragstart" | "drop" | "up" | "down" | "move" | OnEventFunctions | "dragmove" | "draginertiastart" | ..
. 13 more ... | OnEventName[], listener?: Listener): Interactable; ... 8 more ...; removeDocument(any: any): any; }' has no compatible call signatures.

I notice there is a d.ts file but it doesnt seem clear on which bits I should be pulling out to use it, and all examples just show above syntax.

[EddyVinck]

@grofit Have you found a solution yet? I started using TypeScript in a project and I am facing the same issue.

interact(topBar).draggable({
        ignoreFrom: ".minimize, .maximize, .close", // error 1, see below
        onmove: this.handleDrag
});

/*
Error 1:
Argument of type '{ ignoreFrom: string; onmove: (event: any) => void; }' is not assignable to parameter of type 'DraggableOptions'.
  Object literal may only specify known properties, and 'ignoreFrom' does not exist in type 'DraggableOptions'.
*/

and

interact(this.windowElement)
        .resizable({
          // resize from all edges and corners
          edges: { left: true, right: true, bottom: true, top: true },

          // minimum size
          restrictSize: { // error 2, see below
            min: { width: 300, height: 200 }
          }
        })
        .on("resizemove", this.handleResize);

/*
Error 2:

Argument of type '{ edges: { left: boolean; right: boolean; bottom: boolean; top: boolean; }; restrictSize: { min: { width: number; height: number; }; }; }' is not assignable to parameter of type 'ResizableOptions'.
  Object literal may only specify known properties, and 'restrictSize' does not exist in type 'ResizableOptions'.
*/

[grofit]

I just end up casting it to any manually and using it

[EddyVinck]

like this?

.resizable(<any>{
          // resize from all edges and corners
          edges: { left: true, right: true, bottom: true, top: true },

          // minimum size
          restrictSize: {
            min: { width: 300, height: 200 }
          }
        })

[grofit]

Like this I think:

const interactHandle = (<any>interact);
interactHandle.whatever(...);

[taye]

I've converted the project to TypeScript. To get the latest features and more complete typings, do:

npm install interactjs@next

Typings come bundled with the package. If you want only the typings:

npm install --save-dev @interactjs/types@next

[EddyVinck]

Thanks Taye!

I will update my packages and I'll let you know if I run into any problems with the types.

Please also consider submitting your type definitions to Definitely Typed: https://github.com/DefinitelyTyped/DefinitelyTyped/

[taye]

@EddyVinck You're welcome. I've added the types as a dependency to the interactjs package so you shouldn't need to install them manually and there's no need to publish them to DefinitelyTyped.

[kzerbe]

When installing "npm install interactjs@next" i now get release 1.4.0-rc.9.

When importing with "import * as interact from 'interactjs';" interact ist not found in any call to interact().

Importing it with "import interact from 'interactjs';" works for some functions like "unset" or "draggable", but others like "styleCursor" or "preventDefault" are not found:

ERROR in src/app/ioparameter-module/pages/controls/sliders.ts(53,25): error TS2339: Property 'styleCursor' does not exist on type 'Interactable'.
src/app/ioparameter-module/pages/controls/sliders.ts(55,25): error TS2339: Property 'preventDefault' does not exist on type 'Interactable'.

Without static typing (by using "as any") works in some cases but unfortunately not in general.

How should I "import" interact.js ?

My project is bases on Angular 7 and the TypeScript compiler used by that has release 3.1.6

[doronsever]

@kzerbe have you found a fix for that?

[taye]

@kzerbe @doronsever, can you try adding import @interactjs/types to your entry file or to the files that import interactjs?

[specnazzz]

@taye adding import '@interactjs/types' to the files that use interactjs didn't help. I'm using version 1.4.11 of interactjs and as @kzerbe mentioned I'm also getting Property 'styleCursor' does not exist on type 'Interactable'.

[zippos]

i'm struggling with this as well... any hints?
i'm using the latest version of interactjs

[pgschr]

I'm having exactly the same problem i TypeScript/Angular 8, I installede and imported both interactjs and interactjs/types and get in interact('.item).draggable the following error:

This expression is not callable.
Type 'typeof import("...../node_modules/interactjs/index")' has no call signatures.ts(2349)

Did you make this work?

[pilpo]

@pgschr Same here with Angular 8 and "interactjs": "^1.8.0-rc.1".

[zippos]

In version 1.6 i was still using import * as InteractJS from 'interactjs/dist/interact.js'; to import. Types didn't work for me either. Didn't try it with the latest version though.

InteractJS('.item').draggable // for init

[taye]

Please open a new issue detailing the issues you're having.