js 水印插件在TS中的使用

最近在项目中遇到了给页面添加水印的功能，由于项目使用react+Typescript的技术栈,在使用一款ct-watermark水印插件时，遇到了坑，在此记录一下。
由于TS是强类型的JS，如果直接按照javascript库的说明文件引入

// 引入
import waterMark from 'ct-watermark'

的时候，在VScode下会报如下错误：
无法找到模块“ct-watermark”的声明文件。“node_modules/ct-watermark/src/index.js”隐式拥有 “any” 类型。
解决方法有两种：
1. 在npm install 一个库之后，再执行npm install @types/库的名称，对应的类型定义文件将被安装在 工程根目录/node_modules/@types 目录下，但并不是所有的库都会支持TS，如果不成功，就用到了第二种方法。
2. 自己创建一个声明文件并与npm包绑定在一起

以当前的水印插件为例

在下载好的库一级目录下创建types文件夹，并在里面创建index.d.ts文件，结构如下：

由于插件最终export 一个waterMark方法 将waterMark加上括号，改成如下

// index.js
export default {waterMark}

在index.d.ts里面
写入如下代码：

// index.d.ts
declare namespace a{
 function waterMark(config: any): void;
}

export default  a;

并将导入方式和使用方法改为

// index.tsx
import  a from 'ct-watermark';


//使用
a.waterMark({
     type: 'page',
     content: '这是水印'
   })

当然还没有结束，直接运行会提示找不到waterMark方法，还需要到js库文件夹下的的package.json中添加"types": "./types/index.d.ts",才能连起来，
最终效果图：