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

【问题标题】：how to use Snap.svg plugins (Snap.svg.zpd) with typescript and webpack 4如何在 typescript 和 webpack 4 中使用 Snap.svg 插件 (Snap.svg.zpd)
【发布时间】：2018-12-16 11:33:31
【问题描述】：

大家好。

我开始一个新项目（网络应用程序）希望我使用来自https://github.com/hueitan/snap.svg.zpd 的Snap.svg 库和zpd 插件（Snap.svg 的缩放/平移/拖动插件）。
所以我使用Typescript 作为主要编码语言以及webpack 4 作为捆绑解决方案（这两个都是新手）。
我使用 Snap.svg 的修改版本在这个环境中管理了包括 Snap.svg :Snap.svg-cjs （在使用带有 webpack 的官方 Snap.svg 时遇到的一些问题（参见更多here））沿着type definitions for Snap.svg （只是重命名PathToNodeModules/@types/snapsvg 下的文件夹到“snapsvg-cjs”似乎工作得很好）

现在又遇到了另一个问题，包括项目中的 zpd 插件（Typescript）

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

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)

谢谢大家。

【问题讨论】：

标签： javascript typescript svg webpack snap.svg

【解决方案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;
   }
}

【讨论】：