Angular 如何使用第三方库的方法


Posted in Javascript onApril 18, 2018

Angular 的组件与模块看似好像与现有各种第三方类库(例如:lodash、moment 等)使用上有点格格不入,这很大的原因是 TypeScript 造成的假象。三足鼎立的前端其实都是雷同的,不管是哪种前端框架都可以使用到这些第三方类库。

以下我将从另一个视角解释 Angular 如何使用第三方类库的一种经验做法。

一、写在前面

在开始之前,需要先了解一下 TypeScript 模块系统 ——模块是指在其自身作用域里执行,而不是在全局作用域里;模块间是依靠 export 和 import 建立关系。编译器在编译过程中,也是依赖这种关系来定位需要编译的文件。

TypeScript 依然还是以 JavaScript 文件的形式发布类库,这会导致类型无法表述,需要配合声明文件对其进行类型描述;因此声明文件成了类库一个必不可少的组成部分。

二、分类

Angular 使用 TypeScript 语言开发,诚如上一小节讲来说,要想让一个类库被运用,要件是有没有声明文件。

有声明文件

要分清类库是否有声明文件 *.d.ts,可以从两个方面来确认这件事:

1、类库自带

从 Npm 安装一个依赖包后,可以直接检查其库的 package.json 是否包含 typings 节点,例如 moment:

"typings": "./moment.d.ts"

2、TypeSearch检索

TypeScript 提供了一个叫 TypeSearch 网站,可以直接输入关键词检查是否包含该类库的声明文件。

例如 lodash 可以在列表中点击会跳转至 npm 网站,并且会看到这样的一个命令:

npm install --save @types/lodash

无声明文件

这类情况还蛮常见,例如早一点时间 G2 就没有声明文件,这种情况下只能自行编写声明文件。

Angular Cli 创建的项目会包含一个 src/typings.d.ts 声明文件,它会自动包含在全局声明定义中,而把这些类库的声明信息写在这里面再好不过。

一般而言自己很难对一个类库写一个完整的声明文件,这对于成本来说太不合算,因此往往都是只对部分全局对象做一个 any (表示忽略该静态类型检查)亦可,例如:

// src/typings.d.ts
declare var G2: any;

三、如何使用?

声明文件是纽带,依然以这种方式来划分如何使用。

对于有声明文件,无需额外做什么,只需在需要模块的地方使用 import 来导入即可,例如:

import * as moment from 'moment';

moment(); // 当前时间

无声明文件

重要来看无声明文件时怎么做,前面说到使用 any 来表示忽略静态类型检查,意味者无法享受声明文件带来的智能提示快感。

像 G2 ,我们可以在项目的任意位置直接使用它,但也仅仅只能识别 G2 变量,而实例的方法或属性是不可知的。

// app.component.ts

const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

除此之外 TypeScript 编译过程中也不会对 G2 做任何类型检查,G2 是否真的存在只能由自己把握。对于 Angular 而言,是需要额外在 .angular-cli.json 的 scripts 节点上明确加载这些模块。

// .angular-cli.json
"scripts": [
  "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript 编译后依然还是 JavaScript 代码,假如不手动加载 G2 相关 JavaScript 文件,自然在运行过程中会提供未找到 G2 的错误。

总结

从 TypeScript 的视角来看如何使用第三方类库,会有不同的感觉,只是一个简单的非靠谱但有效的描述。希望懂得多的人手下留情。

这里无意黑 G2 的意思,现 G2 已经提供了声明文件了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
jquery实现用户打分评分特效
May 28 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 #jQuery
浅谈mvvm-simple双向绑定简单实现
Apr 18 #Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 #Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 #jQuery
浅谈vuepress 踩坑记
Apr 18 #Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 #Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 #Javascript
You might like
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
django celery redis使用具体实践
2019/04/08 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Python如何获取文件路径/目录
2020/09/22 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
美容院营销方案
2014/03/05 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
化学工程专业求职信
2014/08/10 职场文书
安全生产奖惩制度
2015/08/06 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书