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 相关文章推荐
超级简单的jquery操作表格方法
Dec 15 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
浅谈Express异步进化史
Sep 09 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
简单的php购物车代码
2020/06/05 PHP
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
JavaScript简易计算器制作
2020/01/17 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python中的字典详细介绍
2014/09/18 Python
Python中asyncore的用法实例
2014/09/29 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python 处理图片像素点的实例
2019/01/08 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
物流管理专业大学生自荐信
2013/10/04 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
《画家乡》教学反思
2014/04/22 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
消防演习通知
2015/04/25 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Python中tqdm的使用和例子
2022/09/23 Python