webpack ts js types库无声明文件测试

昨天我用ztree 包里的d.ts 测试提示无模块.今天用个其他的开源包,在types库里边有d.ts的正规包,进行测试

由于ztree的d.ts 在types库内没有声明文件, 但软件包内有,但看起来也不甚正规的样子.通过跟正规的测试,看看是哪里出现的问题,

这次也不下载 测试那套代码的types,直接把 d.ts 放在项目内,引用.仿造跟ztree一样的使用环境.

测试库 是一个缓冲插件.lazyload

npm i lazyload

把d.ts从DefinitelyTyped 项目中取出.放入测试环境中.

import "./js/index"

$(document).ready(() => {
    // basic usage
    $('.lazyload').lazyload();

    // with options
    const options: JQueryLazyLoad.Options = {
        threshold: 200,
        event: 'click',
        effect: 'fadeIn',
        container: $('#container'),
        failure_limit: 10,
        skip_invisible: true,
        appear: (elementsLeft: number, settings: JQueryLazyLoad.Options) => {
            console.log(elementsLeft);
        }
    };
    $('.lazyload').lazyload(options);

    // event on load
    $('.lazyload').on('load', () => {
        $("img.lazy").trigger("click");
    });
});

报错

 

看来单放 d.ts 行不通

把库文件改名放在一块再试

控制台不报错了.浏览器报错

 

 经过分析应该是是d.ts 内的三斜线引入jquery 没成功导致,这个函数没绑到jquery上.

为何通过安装的在types下的就可以,没安装的不行呢,看来走到这,起码能确定,ztree的d.ts 还没走到函数绑定那块,应该卡在这个三斜线引入了

 测试下载 lazyload 的声明库方式

下边又加一个测试库进行测试

 

 

  换了另一个库jquery-mask-plugin       也是上边的方式可以正常使用,看来多半是d.ts 声明的内写法问题或者源文件问题 

后经测试是js源文件在挂$ 传递时失败,导致方法挂载失败.

 lazyload 的开头代码

(function (root, factory) {
    if (typeof exports === "object") {
        module.exports = factory(root);
    } else if (typeof define === "function" && define.amd) {
        define([], factory);
    } else {
        root.LazyLoad = factory(root);
    }
})

mask的开口的代码

(function (factory, jQuery, Zepto) {

    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports === 'object' && typeof Meteor === 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery || Zepto);
    }

作为一个规范，只需定义其语法API，而不关心其实现。AMD规范简单到只有一个API，即define函数：

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
　　其中：
　　module-name: 模块标识，可以省略。             
　　array-of-dependencies: 所依赖的模块，可以省略。
　　module-factory-or-object: 模块的实现，或者一个JavaScript对象。

问题应该出在第一个没有正确加载jquery 引用 所以出现没法赋值情况,不深究了.继续ztree 加入ts项目之路.