js捆绑TypeScript声明文件的方法教程


Posted in Javascript onApril 13, 2018

前话

TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢?

我的理解是,TypeScript在JavaScript基础上引入强类型语言的特性。开发者使用TypeScript语法进行编程开发,最终通过转换工具将TypeScript转换成JavaScript。

使用TypeScript能够避免在原生JavaScript上开发所带来的弱类型语言的坑。(我该输入啥?调用后返回啥?哎还是看看源码吧。。。)

嗯!很好,强类型的JavaScript,挺好的。但是,我舍不得那NPM里众多库无微不至的人文关怀啊o(TヘTo)

别怕,现在很多库已经悄悄地支持TypeScript,就算它无心支持,也有无私奉献的大佬们悄悄地帮这些库支持TypeScript了

这就是引出了本文的主题,TypeScript的声明文件,我认为它是JavaScript库类似C语言的头文件,它的存在便是帮助TypeScript引入JavaScript库

什么是声明文件?

和 C/C++ 的 *.h 头文件(Header files)非常相似:当你在 C/C++ 程序中引用了一个第三方库(.lib/.dll/.so/.a/.la)时,C/C++ 编译器无法自动地识别库内导出名称和函数类型签名等,这就需要使用头文件进行接口声明了。

同理地,TypeScript 的声明文件是一个以 .d.ts 为后缀的 TypeScript 代码文件,但它的作用是描述一个 JavaScript 模块(广义上的)内所有导出接口的类型信息。

关于TypeScript声明文件的写法和规范请参考参考如下官方文档和优秀博文:

  • https://www.tslang.cn/docs/handbook/declaration-files/introduction.html
  • https://3water.com/article/138217.htm

根据官方文档介绍,有以下两个捆绑方式:

  • 与你的npm包捆绑在一起
  • 发布到npm上的@types organization

与npm包捆绑一起就是前面说的,开发者在ts项目中npm install一个库并在代码文件中import后直接即可使用。

当部分库官方不维护的时候,就可以通过第二个方式,在npm install一个库后,再执行 npm install @types/库名 安装库的声明文件即可使用。其原理是TypeScript在2.0版本之后,当你import 一个库的时候,当他在配置的include路径中未找到指定的库,就会在node_modules的@types中寻找该库。

一般来说,官方推荐第一种方式书写发布声明文件,下面我直接用例子来展示第一种捆绑方式吧。

例子

首先初始化TypeScript项目,目录结构如下:

js捆绑TypeScript声明文件的方法教程

tsconfig.json配置如下:

{
 "compilerOptions": {
 "target": "es5",
 /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
 "module": "commonjs",
 /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
 "allowJs": true,
 "outDir": "./dist",
 /* Redirect output structure to the directory. */
 /* Allow javascript files to be compiled. */
 "strict": true /* Enable all strict type-checking options. */
 },
 "include": [
 "src/**/*"
 ]
}

可以看到,我写了个模块 a ,并且给它捆绑了声明文件,模块 a ,即 src/a/index.js 内容如下:

const NAME = 'A';
let call = (who) => {
 console.log('Hello ' + who + '! I am ' + NAME);
}
export default {
 call
}

其声明文件即 src/a/index.d.ts 内容如下:

declare namespace a {
 function call(who: string): void;
}
export default a;

这时,我们便可以在入口文件 src/index.ts 引入 a 模块:

import a from './a';
a.call('Pwcong');

命令行执行 tsc 后即可在目录 dist 中生成js代码:

js捆绑TypeScript声明文件的方法教程

执行命令 node ./dist/index.js 可以得到相应正确的输出。

我们再模拟导入发布后的NPM库,在 node_modules 目录下创建目录 b ,并初始化Node项目,这时目录结构如下:

js捆绑TypeScript声明文件的方法教程

其中 node_modules/b/types/package.json 内容如下:

{
 "name": "b",
 "version": "1.0.0",
 "main": "./src/index.js",
 "types": "./types/index.d.ts"
}

node_modules/b/src/index.js 内容如下:

const NAME = 'B';
let call = (who) => {
 console.log('Hello ' + who + '! I am ' + NAME);
}
module.exports = {
 call
}

声明文件 node_modules/b/types/index.d.ts 内容如下:

declare namespace b {
 function call(who: string): void;
}
export = b;

这时,我们修改 src/index.ts :

import a from './a';
a.call('Pwcong');
import b = require('b');
b.call('Pwcong');

命令行执行 tsc 后即可在目录 dist 中生成js代码后执行命令 node ./dist/index.js 也可以得到相应正确的输出。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
Vue2.0 实现单选互斥的方法
Apr 13 #Javascript
Vue render深入开发讲解
Apr 13 #Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
python threading模块操作多线程介绍
2015/04/08 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python微信好友数据分析详解
2018/11/19 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python图片的横坐标汉字实例
2019/12/04 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
书香家庭事迹材料
2014/05/09 职场文书
2014年纪检工作总结
2014/11/12 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL