记一次为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...

参考资料

相关推荐
你的人类朋友20 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手37 分钟前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试常考题目详解
前端·javascript