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将NodeList作为Array数组处理的方法
Jul 09 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
JS获取当前时间戳方法解析
Aug 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
YB217、YB235、YB400浅听
2021/03/02 无线电
php实现推荐功能的简单实例
2019/09/29 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javascript this用法小结
2008/12/19 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
javascript实现日历效果
2019/06/17 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
难忘的一天教学反思
2014/04/30 职场文书
满月酒邀请函
2015/01/30 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
公司酒会主持词
2015/07/02 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python