如何在TypeScript中使用JS类库
使用流程
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/moment import m from 'moment';
declare module 'moment'{
export function myFunction(): void;
}
m.myFunction = () => {console.log("moment插件")}; m.myFunction();
如何在TypeScript中使用JS类库的更多相关文章
- 【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。
[TypeScript]如何在TypeScript中使用async/await,让你的代码更像C#. async/await 提到这个东西,大家应该都很熟悉.最出名的可能就是C#中的,但也有其它语言也 ...
- Nodejs的安装配置及如何在sublimetext2中运行js
Nodejs的安装配置及如何在sublimetext2中运行js听语音 | 浏览:4554 | 更新:2015-06-16 11:29 Nodejs的安装配置及如何在sublimetext2中运行js ...
- (转)如何在Eclipse中查看JDK类库的源代码
在Eclipse中查看JDK类库的源代码!!! 设置: 1.点 “window”-> "Preferences" -> "Java" -> & ...
- 在typescript中import第三方类库clipboard报错
一.问题 在实际开发项目中就遇到了这样的问题,需要在Vue+Typescript项目中添加复制文本的功能,就找了clipboard插件,先是新建了一个新的项目用来实验看看是否好用,都写好了以后发给别人 ...
- 如何在Webstorm中添加js库 (青瓷H5游戏引擎)
js等动态语言编码最大的缺点就是没有智能补全代码,webstorm做到了. qici_engine作为开发使用的库,如果能智能解析成提示再好不过了,经测试80%左右都有提示,已经很好了. 其他js库同 ...
- 如何在Firebug中修改js变量的值
在做项目的时候,经常需要调试js,要是项目环境在本地,可以直接在js代码里面设置断点或者修改变量值.但是在测试或者生产等线上环境时,再频繁登录服务器去修改js代码就显得麻烦了.项目线上环境,可以在fi ...
- 如何在TypeScript中使用第三方JavaScript框架
一.安装typings 使用npm全局安装typings :npm install -g typings 安装成功. 二,搜索资源,支持模糊搜索:typings search base64 三.安装t ...
- 关于如何在MVC中 执行JS
Response.Write("<script>KHTPREFERENCE()</script>"); return this.MessageResult( ...
- 如何在Eclipse中查看Java类库的源代码以及相应的api
你的JDK安装目录下%Java_home%/src.zip文件就是源码,解压缩找到对应包下面的类即可. 如果是Eclipse开发,ctr+鼠标左击,出现不了源码的话,在弹出的视图中点击attach s ...
随机推荐
- a common method to rotate the image
/* * clockwise rotate * first reverse up to down, then swap the symmetry * 1 2 3 7 8 9 7 4 1 * 4 5 6 ...
- Android基础控件EditText
1.常用属性 <!--selectAllOnFocus 获得焦点后全选组件内所有文本内容--> <!--inputType 限制输入方式--> <!--singleLin ...
- Acer电脑【no bootable device】引导修复
时隔一年,又遇上了我的电脑出现 No Bootable Device 的开机提示,进不了系统. 那么怎么办呢? // 本文修复方式仅针对宏碁电脑且分区表为MBR的情况.按如下方法引导并未 ...
- 立体声耳机接口3F07
仅探讨三段式 剩余的两根,则是开关,插入耳机后,会断开,可以用于耳机和扬声器的切换.老式收音机大多采用这个结构
- python collections模块 之 ChainMap
ChainMap提供了一种多个字典整合的方式,它没有去合并这些字典,而是将这些字典放在一个 maps (一个列表)里,内部实现了很多 dict 的方法,大部分 dict 的方法,ChainMap 都能 ...
- mvvmlight下passwordBox绑定的解决方法
在做公司的项目中,用到MVVMLight框架,需要做登陆注册的功能模块,但是在wpf中passwordBox没有内置绑定功能,因为出于安全的考虑.但是,博主又非常想要契合mvvm思想,一定要passw ...
- 设置苹果手机input按钮和button按钮颜色显示问题
网页上,尽管设置了input按钮和button的背景颜色,但在苹果手机上测试时仍会发现背景颜色为透明渐变色,不起作用,怎么解决呢? 在css公共样式中加上下面代码就可以解决,去除button和inpu ...
- Leetcode951. Flip Equivalent Binary Trees翻转等价二叉树
我们可以为二叉树 T 定义一个翻转操作,如下所示:选择任意节点,然后交换它的左子树和右子树. 只要经过一定次数的翻转操作后,能使 X 等于 Y,我们就称二叉树 X 翻转等价于二叉树 Y. 编写一个判断 ...
- There is no public key available for the following key IDs:3B4FE6ACC0B21F32
ubuntu 运行完sudo apt-get update之后,提示 W: There is no public key available for the following key IDs: 3B ...
- ssh 免密码登入
1.普通免密码登入 (1) 生成秘钥 [root@vick ~]# ssh-keygen -t rsa Generating public/private rsa key pair. Enter f ...