Typescript项目中使用Fastclick库的问题

移动端H5项目开发中必然会碰到点击事件响应延时的问题,因为移动端在手指触碰屏幕时,系统不知道你是想点击还是滑动,因此会存在一个大约300ms的延时判断(事实上这也只是样式上的延时比如高亮,如果存在事件的话比如点击是没会立即执行的,没有延时),以此为前置了解……

Fastclick库很好的解决了这个问题,我们只需要几行代码即可轻松搞定

import FastClick from 'fastclick'
FastClick.attach(document.body)

问题一

以上是Javascript的使用场景,然而,如果是TypeScript的话这样就不行了,引用会报错

Could not find a declaration file for module 'fastclick'. 

因为这是一个纯JS库,Typescript支持需要添加@types/fastclick的支持

npm install @types/fastclick

!!!注意啦,不是用@types/fastclick来代替fastclick,而是要额外安装@types/click

问题二

FastClick.attach(document.body)这行代码中attach的调用会报错

Property 'attach' does not exist on type 'typeof fastclick'.

网上有一个解决方案就是修改@types/fastclick下的index.d.ts源码,将

declare module "fastclick" {
    function fastclick(layer: any, options?: FastClickOptions): FastClickObject;
    namespace fastclick {
        var FastClick: FastClickStatic;
    }

    export = fastclick;
}

修改为:

declare module "fastclick" {
    const fastclick: FastClickStatic;
    export = fastclick;
}

问题得已解决,可毕竟是修改了node_modules中的源码,如果有更新或其他人拉取代码时,岂不是又会报出这个问题?!

一个比较好的解决方案是在项目根目录下新建一个fastClick.d.ts的文件,对其进行重新声明,文件内容为:

declare module 'fastclick' {
  const fastclick: FastClickStatic
  export = fastclick;
}

好了,一切都搞定了!

Leave a Reply