如何将 Snap.svg 插件 (Snap.svg.zpd) 与 typescript 和 webpack 4 一起使用

Question

大家好。

我正在开始一个新项目（网络应用程序），希望要求我使用来自 https 的 Snap.svg 库以及 zpd 插件（Snap.svg 的缩放/平移/拖动插件）： //github.com/hueitan/snap.svg.zpd.
所以我使用 Typescript 作为主要编码语言，并使用 webpack 4 作为捆绑解决方案（这两个都是新手）。
我设法在这个环境中使用 Snap.svg 的修改版本包含 Snap.svg ：Snap.svg-cjs（由于在 webpack 中使用官方 Snap.svg 时遇到的一些问题（请参阅更多here）） 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

对于面临同样问题的任何人，您只需要为该插件制作自己的“类型定义”。 我是这样做的：

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;
   }
}

Answer 2

//import * as Snap from 'snapsvg';  //do not work with webpack

import * as Snap from 'snapsvg-cjs-ts'; //works fine

尝试这个而不是

当然你需要安装它：

npm install --save snapsvg-cjs-ts