恒辉建设集团网站,网站开发的功能需求文档,wordpress不支持自定主题字体,推荐一个简单的网站制作使用流程 1.首先要清除类库是什么类型#xff0c;不同的类库有不同的使用方式 2.寻找声明文件 JS类库一般有三类#xff1a;全局类库、模块类库、UMD库。例如#xff0c;jQuery是一种UMD库#xff0c;既可以通过全局方式来引用#xff0c;也可以模块化引用。 声明文件 当我… 使用流程 1.首先要清除类库是什么类型不同的类库有不同的使用方式 2.寻找声明文件 JS类库一般有三类全局类库、模块类库、UMD库。例如jQuery是一种UMD库既可以通过全局方式来引用也可以模块化引用。 声明文件 当我们要使用一个类库时需要ts声明文件对外暴露API有时候声明文件在源码中大部分是单独提供额外安装。比如jQuery需要额外安装类型声明包。 幸运的是大部分的类库TS社区都有声明文件。名称为types/类库名需要去这个网站搜一下http://microsoft.github.io/TypeSearch/ 如果没有需要自己去写一个这也是为社区贡献的好机会。http://definitelytyped.org/guides/contributing.html这里提供了一些写声明文件的方法。在写ts声明文件的时候暂时用不到的API可以可以不写。 下面我将演示如何在ts文件中使用三种类库。首先准备三个js文件分别表示全局类库、模块类库、UMD库。 // 全局类库 global-lib.js function globalLib(options) {console.log(options); } globalLib.version 1.0.0; globalLib.doSomething function () {console.log(globalLib do something); };// 模块类库 module-lib.js const version 1.0.0; function doSomething() {console.log(moduleLib do something); } function moduleLib(options) {console.log(options); } moduleLib.version version; moduleLib.doSomething doSomething; module.exports moduleLib;// UMD库 umd-lib.js (function (root, factory) {if(typeof define function define.amd){define(factory);}else if(typeof module object module.exports){module.exports factory();}else{root.umdLib factory();} })(this, function () {return {version: 1.0.2,doSomething() {console.log(umdLib do something);}} }); 全局类库 在HTML文件script标签中引入该库将写好的声明文件与js库放在同一文件夹下命名相同后缀名为.d.ts此时可以在ts文件中使用全局API如果此时编译器未报错而浏览器报错not defined可能是html中引入的路径是相对路径改成绝对路径即可以项目目录为根目录。 声明文件global-lib.d.ts declare function globalLib(options: globalLib.Options): void; declare namespace globalLib{const version: string;function doSomething(): void;interface Options {[key: string]: any,} } 在ts文件中使用该库 globalLib({x:1}); globalLib.doSomething(); 模块类库 将声明文件放在相同的目录下在ts中引入声明文件 module-lib.d.ts declare function moduleLib(options: Options): void; interface Options {[key: string]: any, } declare namespace moduleLib{const version: string;function doSomething(): void; } export moduleLib; // 这样写兼容性更好 ts中使用类库 import moduleLib from ./Libs/module-lib.js; moduleLib.doSomething(); UMD类库 UMD库有两种使用方式 引入全局类库的方式模块类库引入的方式其中在使用全局类库的引入方式时编译器会提示不建议这样做需要在tsconfig.json中打开allUmdGlobalAccess配置项可以消除提示。 声明文件 umd-lib.d.ts declare namespace umdLib {const version: string;function doSomething(): void; } export as namespace umdLib // 专门为umd库准备的语句不可缺少 export umdLib ts中使用UMD库不再演示全局使用方式 import umdLib from ./Libs/umd-lib umdLib.doSomething(); console.log(umdLib.version); 例在ts中使用jQuery不演示全局引入方式 先安装jquery及其声明文件 npm install -D jquery types/jquery 使用 import $ from jquery; $(.app).css(color,red); 为类库添加插件 即为类库添加自定义的方法 其中UMD库和模块类库的添加插件方法一致。 // 为全局类库增添自定义方法 declare global {namespace globalLib {function myFunction(): void} } globalLib.myFunction () {console.log(global插件)};// 为模块类库添加自定义方法 declare module ./Libs/module-lib.js{export function myFunction(): void; } // 为module-lib类库声明myFunction方法 moduleLib.myFunction () {console.log(module插件)}; // 定义自定义方法// 为UMD库添加自定义方法 declare module ./Libs/umd-lib.js{export function myFunction(): void; } // 为umd-lib类库声明myFunction方法 umdLib.myFunction () {console.log(umd插件)}; // 定义自定义方法globalLib.myFunction(); moduleLib.myFunction(); umdLib.myFunction(); 例如为类库moment增添自定义方法jQuery不可以需要使用官方提供的API npm install -D moment types/momentimport m from moment; declare module moment{export function myFunction(): void; } m.myFunction () {console.log(moment插件)};m.myFunction();   转载于:https://www.cnblogs.com/V587Chinese/p/11519932.html