记一次为js库开发声明文件的过程

背景

前段时间同事给我推了font-carrier 这个字体库,让我去开发一些字体工具。在使用这个库的过程中,发现这个库使用JavaScript开放,而我的项目用的是TypeScript,开发体验非常差。于是,我就萌生了为这个库添加类型的想法。

最后通过调研决定通过DefinitelyTyped实现。

什么是DefinitelyTyped

简单来说就是为那些使用纯js编写的库添加typescript类型的一种方式,例如React对应的@types/react。

所以为了font-carrier支持类型,就需要@types/font-carrier的声明库。

实现步骤

1 fork仓库

首先我们需要fork一份DefinitelyTyped的仓库,这样才能随意更改,当改完后再给他们提PR即可。

仓库地址:github.com/DefinitelyT...

2 拉取fork后的仓库

scss 复制代码
git clone git@github.com:zFitness/DefinitelyTyped.git

3 安装依赖

bash 复制代码
cd DefinitelyTyped
yarn

4 dts-gen安装

css 复制代码
npm i -g dts-gen

5 使用dts-gen创建目录

css 复制代码
npx dts-gen --dt --name font-carrier --template module

6 编写类型

这里有个注意事项,如果你的库是使用commonjs语法的导入导出,而不是es module的导入导出。

ini 复制代码
export = test
import test = require('')

参考文档: www.typescriptlang.org/docs/handbo...

下面是一些常用的写法转换:

导出一个对象

commonjs 导出一个对象时候:

ini 复制代码
const maxInterval = 12;
function getArrayLength(arr) {
  return arr.length;
}
module.exports = {
  getArrayLength,
  maxInterval,
};

写成ts:

arduino 复制代码
export function getArrayLength(arr: any[]): number;
export const maxInterval: 12;

导出正则表达式

javascript 复制代码
module.exports = /hello/

ts可以写成这样子

typescript 复制代码
declare const helloworld: RegExp;
export default helloworld;

导出数字

ini 复制代码
module.exports = 3.14

ts 可以写成如下:

typescript 复制代码
declare const PI:  number;
export default PI;

导出函数

CommonJS 中的一种导出方式是导出函数。因为函数也是对象,所以可以添加额外的字段并将其包含在导出中:

ini 复制代码
function getArrayLength(arr) {
  return arr.length;
}
getArrayLength.maxInterval = 12;
module.exports = getArrayLength

转换成ts如下:

arduino 复制代码
export default function(arr: any[]): number;
export const maxInterval: 12;

注意必须在 d.ts 中开启 esModuleInterop: true, 例如提交PR到Definitely Typed中的时候。这里可以使用export=来代替

typescript 复制代码
declare namespace getArrayLength {
  declare const maxInterval: 12;
}
declare function getArrayLength(arr: any[]): number;
export = getArrayLength;

7 发布测试

开发完后可以通过test命令进行测试。

bash 复制代码
npm test font-carrier

测试流程通过就可以提交代码,再提交一个PR,对方审核通过就会自动发布。

下面是我的提交PR:

github.com/DefinitelyT...

最后关于我编写的@types/font-carrier, 欢迎使用: www.npmjs.com/package/@ty...

参考资料

相关推荐
yangzhi_emo3 分钟前
ES6笔记5
前端·笔记·es6
Hexene...1 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See1 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
普通码农1 小时前
Element Plus 数字输入框箭头隐藏方案
前端
草字1 小时前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
Slice_cy2 小时前
深入剖析Vue框架:实现精简的computed
前端
局i2 小时前
ES6 类与继承:现代 JavaScript 面向对象编程
前端·javascript·es6
白菜上路2 小时前
C# Web API Mapster基本使用
前端·c#
叫我詹躲躲2 小时前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js
会豪2 小时前
如何让自己的前端项目更优雅
前端