热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

用typescript来写npm模块

用typescript来写npm模块还不知道typescript是啥的前端童鞋需要做下功课了。随着es6的普及,越来越多的npm模块都开始用es6编写或者重构,看上去或者听起来都挺
用typescript来写npm模块

还不知道typescript是啥的前端童鞋需要做下功课了。

随着es6的普及,越来越多的npm模块都开始用es6编写或者重构,看上去或者听起来都挺高大上的。

然而,模块调用者要使用这些模块,依然要去npm仓库或者github上仔细看该模块的api,哪些方法该传什么类型的参数,返回什么类型的值都需要注意。

所以说,用es6来写模块仅仅是写得爽了,用起来和之前并没什么不同。那如何做到写起来爽用得也爽呢,答案是typescript

用起来爽不爽,贴张gif感受一下。

《用typescript来写npm模块》

mini-moment这个模块是我用typescript写的,上面gif中可以看到,Moment有哪些静态方法、实例有哪些属性和方法、方法都接收什么类型的参数、返回什么类型的值编辑器都给出了智能提示,不用去看api了,也不用担心传错参数。这可不是用es6写能做到的。

那智能提示是怎么做到的呢?

这都要归功于typescript的头文件*.d.ts,这个文件就像模块的名片,里面定义了模块的各种类/方法/属性等信息。目前主流的前端/Node.js的类库/框架都有对应的.d.ts文件,可以去DefinitelyTyped上找一下。要使用的话可以通过tsd或者typings这两个工具安装(两个工具的作者是同一个人,目前tsd已经废弃了,但是typingstsd好用,经常出问题,typings不行的时候我就会用tsd)。

所以我们写的模块要想用的时候有智能提示,就要编写对应的.d.ts文件,并把这个文件发布出去。目前有下面几种方法

  1. 添加到DefinitelyTyped仓库

    • fork DefinitelyTyped这个github仓库

    • 提交自己模块的.d.ts文件和对应的测试文件

    • 提交pull requestDefinitelyTyped,等待作者merge

    • merge后调用者就可以通过tsd/typings来安装使用

    此方法可以解决模块依赖问题,但是周期太长,DefinitelyTyped作者可能不会及时merge,也可能把你的pull request打回来。

  2. 放在自己的github之类的仓库

    • 指定头文件路径,通过tsd/typings来安装使用

    此方法头文件由自己维护,不方便管理,但是用的时候要到处copy头文件路径。

  3. 随模块一起发布

    • 编写头文件,命名为index.d.ts,放在项目根目录

    • npm publish的时候包含这个文件

此方法不需要用tsd/typings安装,npm install模块的时候就有了,但是这种方法在依赖其他模块的时候就比较坑。

以上几种方法各有利弊,视情况选择。

说了头文件的编写,再说文件的打包,打包当然是webpack了。

我们用typescript开发的模块最终是要编译成Javascript的,但是typescript在编译的时候有些坑爹,当编译的target选项设置为es6时只会将代码编译成es6的语法,这样的代码在很多浏览器上是跑不起来的,而将target设置为es5或者es3的时候又没法使用某些es6的特性。很是蛋疼,不过还好,我们有babel这个好基友,新特性照写,代码照跑。

所以我们的loader可以这样写:

{
loaders: [
{ test: /\.ts?$/, loader: "babel?presets[]=es2015!ts" }
]
}

还没完,我们开发的模块编译后要兼容各种模块规范,用typescript或者es6的模块导入导出一般是用的importexport,一般是编译成commonjs或者amd规范,这样的代码不一定在所有环境都能跑起来。没关系,我们还有umd

所以我们的webpack.config.js可以这样写:

"use strict";
const webpack = require('webpack');
const modName = "YOUR_MOD_NAME";
module.exports = {
entry: "./src/index.ts",
output: {
filename: `./dist/${modName}.js`,
library: modName,
libraryTarget: 'umd',
umdNamedDefine: true
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
loaders: [
{ test: /\.ts?$/, loader: "babel?presets[]=es2015!ts" }
]
}
};

自从typescript的生态越来越好后,我已再次入坑typescript,目前已经用typescript写了几个东西了,后续会再分享一些使用typescript的经验。


推荐阅读
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • C++ 开发实战:实用技巧与经验分享
    C++ 开发实战:实用技巧与经验分享 ... [详细]
  • 本指南从零开始介绍Scala编程语言的基础知识,重点讲解了Scala解释器REPL(读取-求值-打印-循环)的使用方法。REPL是Scala开发中的重要工具,能够帮助初学者快速理解和实践Scala的基本语法和特性。通过详细的示例和练习,读者将能够熟练掌握Scala的基础概念和编程技巧。 ... [详细]
  • 第六章:枚举类型与switch结构的应用分析
    第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型(`enum`)是一种将一组相关常量组织在一起的数据类型,广泛存在于多种编程语言中。例如,在 Cocoa 框架中,处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构,可以更清晰、高效地实现基于枚举值的逻辑分支,提高代码的可读性和维护性。 ... [详细]
  • 如何精通编程语言:全面指南与实用技巧
    如何精通编程语言:全面指南与实用技巧 ... [详细]
  • 本文探讨了利用JavaScript实现集合的对称差集算法的方法。该算法旨在处理多个数组作为输入参数,同时保留每个数组中元素的原始顺序。算法不会移除单个数组内的重复元素,但会删除在不同数组之间出现的重复项。通过这种方式,能够有效地计算出多个数组的对称差集。 ... [详细]
  • 本文探讨了资源访问的学习路径与方法,旨在帮助学习者更高效地获取和利用各类资源。通过分析不同资源的特点和应用场景,提出了多种实用的学习策略和技术手段,为学习者提供了系统的指导和建议。 ... [详细]
  • AIX编程挑战赛:AIX正方形问题的算法解析与Java代码实现
    在昨晚的阅读中,我注意到了CSDN博主西部阿呆-小草屋发表的一篇文章《AIX程序设计大赛——AIX正方形问题》。该文详细阐述了AIX正方形问题的背景,并提供了一种基于Java语言的解决方案。本文将深入解析这一算法的核心思想,并展示具体的Java代码实现,旨在为参赛者和编程爱好者提供有价值的参考。 ... [详细]
  • 在JavaWeb项目架构中,NFS(网络文件系统)的实现与优化是关键环节。NFS允许不同主机系统通过局域网共享文件和目录,提高资源利用率和数据访问效率。本文详细探讨了NFS在JavaWeb项目中的应用,包括配置、性能优化及常见问题的解决方案,旨在为开发者提供实用的技术参考。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • 本文详细介绍了如何在Java Web服务器上部署音视频服务,并提供了完整的验证流程。以AnyChat为例,这是一款跨平台的音视频解决方案,广泛应用于需要实时音视频交互的项目中。通过具体的部署步骤和测试方法,确保了音视频服务的稳定性和可靠性。 ... [详细]
  • 本文深入探讨了 Git 与 SVN 的高效使用技巧,旨在帮助开发者轻松应对版本控制中的各种挑战。通过详细解析两种工具的核心功能与最佳实践,读者将能够更好地掌握版本管理的精髓,提高开发效率。 ... [详细]
  • 本文详细探讨了Zebra路由软件中的线程机制及其实际应用。通过对Zebra线程模型的深入分析,揭示了其在高效处理网络路由任务中的关键作用。文章还介绍了线程同步与通信机制,以及如何通过优化线程管理提升系统性能。此外,结合具体应用场景,展示了Zebra线程机制在复杂网络环境下的优势和灵活性。 ... [详细]
  • Android中将独立SO库封装进JAR包并实现SO库的加载与调用
    在Android开发中,将独立的SO库封装进JAR包并实现其加载与调用是一个常见的需求。本文详细介绍了如何将SO库嵌入到JAR包中,并确保在外部应用调用该JAR包时能够正确加载和使用这些SO库。通过这种方式,开发者可以更方便地管理和分发包含原生代码的库文件,提高开发效率和代码复用性。文章还探讨了常见的问题及其解决方案,帮助开发者避免在实际应用中遇到的坑。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
author-avatar
老翅几回寒_332
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有