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

参考资料

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法