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 相关文章推荐
jQuery版仿Path菜单效果
Dec 15 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
用js实现放大镜效果
Oct 28 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
谈谈PHP语法(3)
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
平面设计的岗位职责
2013/11/08 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
个人党性剖析材料
2014/02/03 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
本溪关门山导游词
2015/02/09 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
学习nginx基础知识
2021/09/04 Servers