如何在 typescript 和 webpack 4 中使用 Snap.svg 插件 (Snap.svg.zpd)

Question

大家好

我正在开始一个新项目（网络应用程序）希望要求我使用 Snap.svg library along with the zpd plugin (A zoom/pan/drag plugin for Snap.svg) from https://github.com/hueitan/snap.svg.zpd。
所以我使用 Typescript as the mains coding language along with webpack 4 作为捆绑解决方案（这两个都是新手）。
我设法在这个环境中使用 Snap.svg 的修改版本包括 Snap.svg :Snap.svg-cjs (duo to some problems encountered when using the official Snap.svg with webpack (see more ) ) along type definitions for Snap.svg （只是将 PathToNodeModules/@types/snapsvg 下的文件夹重命名为“snapsvg-cjs”似乎只是工作很好）

现在我遇到了另一个问题，包括项目中的 zpd 插件 (Typescript)

问题似乎是由于该插件缺少类型定义所致，所以任何人都可以帮助我如何编写这些类型，或者提供一种解决方法以在不编写的情况下将 snap.svg 插件包含在 Typescript 项目中打字

import * as Snap from "snapsvg-cjs";
import  {Paper} from "snapsvg-cjs";
//TODO : include the zpd plugin

let p:Paper;
p= Snap("snap") 
p.circle(100,100,50)

谢谢大家

Answer 1

对于遇到相同问题的任何人，您只需要为该插件制作自己的 "type definitions"。我是这样做的：

import * as Snap from 'snapsvg-cjs';
//or  import * as Snap from 'snap.svg'; 
//if you are using the official version of snap.svg

declare module  'snapsvg-cjs' {
   interface  Paper{

       zpd (options?:any, callbackFunc?:(nan:null,zpdelement:any)=>void):void
       zoomTo(zoom:number, interval?:number, ease?:(num:number)=>number, callbackFunction?:(nan:null,zpdelement:any)=>void):void;
       panTo(x:string|number, y:string|number, interval?: number, ease?:(num:number)=>number, cb?:(nan:null,zpdelement:any)=>void):void;
       rotate(a:number,x?:number, y?:number, interval?: number, ease?:(num:number)=>number, cb?:(nan:null,zpdelement:any)=>void):void;
   }
}

如何在 typescript 和 webpack 4 中使用 Snap.svg 插件 (Snap.svg.zpd)

how to use Snap.svg plugins (Snap.svg.zpd) with typescript and webpack 4

javascript

typescript

svg

webpack

snap.svg

大家好

现在我遇到了另一个问题，包括项目中的 zpd 插件 (Typescript)