向微软官方贡献 @types 包

洛竹 等级 318 0 0

在前端社区中,TypeScript 差不多是老生常谈的主题了。这不仅反映了 TypeScript 的流行度,也反映了它的学习上手成本。今天我们不来探讨 TypeScript 本身。而是记录一下我艰难地发布一个 @types 包的历程。

a year ago

向微软官方贡献 @types 包

上图是我在掘金的第一篇文章 优雅地使用 TypeScript 开发 React Native 应用 中的一条素质问答。问题就是有些库不是 TS 写的,也没提供类型声明该怎么办。从图中可见我当时的解决方法都是不可复用且不利他的。但这就是我这一年来处理该问题的常规手段。

向微软官方贡献 @types 包

DefinitelyTyped

像是 Node 有 NPM,Java 有 Maven,TypeScript 也有它的另一半,那就是号称 GitHub review 数量之最的 DefinitelyTyped 项目。

向微软官方贡献 @types 包

在 TypeScript 大规模应用之前,社区已经有超过 90% 的顶级 JavaScript 库,或基于 Flow 编写的库(React 系)。如果没有 DefinitelyTyped 项目,这些库想要提供类型支持,无疑只有完全重构代码。这既不现实也没必要。

鉴于 DefinitelyTyped 的作用,我们说 DefinitelyTyped 让 TypeScript 再次伟大也不为过。

DefinitelyTyped 目前是由微软官方维护的开源项目,参与的方式和 Homebrew 差不多,都是基于 GitHub 的工作流:

  1. fork DefinitelyTyped 到自己的账号下
  2. 添加自己的包并编写类型声明
  3. 提交 PR
  4. 官方 review 并合并发布到 NPM

艰辛的贡献历程

1、检查是否已存在同名的包:

npm info @types/tuya-panel-kit

2、安装 dts-gen:

npm install -g dts-gen

3、生成新包

dts-gen --dt --name tuya-panel-kit --template module

4、格式化代码

npm run prettier -- --write types/tuya-panel-kit/**/*.ts

这一步务必要执行,因为 DefinitelyTyped 十分严格,格式不对过不了 CI。过不了 CI,就只配和机器人对话:

向微软官方贡献 @types 包

5、dtslint

yarn lint tuya-panel-kit

这一步是最让人头大的一步,Definitely 的规则可谓严苛,真就对的起它的 SLOGAN:

The repository for high quality TypeScript type definitions

我梳理了一下成功路上的绊脚石:

1、 Cannot find module 'csstype' when npm run lint package-name

这是一个流程 BUG,如果你的包依赖了 react,你需要执行 cd types/react && npm installcd ~/.dts/typescript-installs/3.2/ && npm install

2、如果你的包依赖了别的外部库,需要添加到 microsoft/DefinitelyTyped-tools 项目中,否则 CI 不给过。

3、你的类型声明可能有很多不符合 dtslint 的标准,我看到有的包是在 tslint.json 中配置禁用掉部分规则,但是我做了尝试后被人工拒绝了。

向微软官方贡献 @types 包

然后我尝试在顶部加入 // tslint:disable:max-line-length 禁用规则,在说明原因后通过了 Review。就在发稿时,最新 PR 却因为一个禁用规则,被要求修改:

向微软官方贡献 @types 包

规范的重要性

刚开始时,这种严苛漫长的 review 流程着实让我头大。但在提过 4 个 PR 都被合并后,我发现 review 的人关心的是你为什么要这么写,是不是有什么不得已的苦衷,是否符合高质量的要求。

在参与 DefinitelyTyped 的协作中,我越来越发现规范的重要。如此体量的项目,如果没有严格有效的规范约束,势必会被开发者抛弃。那我们来看看 DefinitelyTyped 中是如何约束的:

  1. dtslint :微软专门写的用来检验类型声明文件的工具。正是因为它,我做了大量优化工作。
  2. 机器人 🤖(dt-mergebot、dt-review-bot、typescript-bot-watchdog):在你的代码通过所有规范之前,都是这些机器人在和你交互。大家感兴趣的话,之后我会单独出一篇解析的文章
  3. 尽职尽责的维护:虽然有时 review 速度明显很慢(可能因为国外疫情)。但是这些维护者真的是尽职尽责的 review 你的代码。机器再厉害也只是一个减少工作量的工具。我们应该致敬的还是这些为社区默默奉献的人。

向微软官方贡献 @types 包

收藏
评论区

相关推荐

尤雨溪:TypeScript不会取代JavaScript
近日,Evrone 与 Vue.js 的作者尤雨溪进行了一次访谈,了解他对于无后端与全栈方法、以及 Vue.js 适用场景的看法,还有他本人如何在工作与生活之间取得平衡。 记者: 嗨 Evan,很荣幸你能接受我们的访谈。那就先从一个简单的问题开始:您的全职工作岗位是由 Patreon 资助的,大多数人恐怕都没有这样的机会。您能聊聊怎样在工作与生活之间找到
为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
Canvas入门实战之用javascript面向对象实现一个图形验证码
本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能,关于canvas的一些基本使用方法和API我整理了一个思维导图,大家感兴趣的可以参考学习。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b158fad95
Dart基础>Dart语法(下)
前文链接: Dart简介(https://www.jianshu.com/p/c749f40828a5) Dart语法(上)(https://www.jianshu.com/p/6b5689342e24) 内容: 函数(方法) 函数定义及各类函数;函数参数;闭包 面向对象 定义;构造函数;成员(变
每天学点 JS 编码规范(1):Types 和 References
每天学点 JS 编码规范(1):Types 和 References 前端大全 微信号 FrontDev 功能介绍 分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯 _前天_ 收录于话题 (给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kak
前端开发神器Charles从入门到卸载
前言 本文将带大家学习使用前端开发神器charles,从基本的下载安装到常见配置使用,为大家一一讲解。 一、花式夸奖Charles 截取 Http 和 Https 网络封包。 支持重发网络请求,方便后端调试。 支持修改网络请求参数。 支持网络请求的截获并动态修改。 支持模拟慢速网络。 好,骑上我心爱的小摩托,准备上路... 二、下载
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
使用 VS Code 来开发和调试 Python 程序
(简称 VSCode)是微软出品的一款支持多种语言的免费 IDE(集成开发环境)。VSCode 轻量而强大,支持 Windows、macOS 和 Linux。内置支持 JavaScript、TypeScript 和 Node.js,并且拥有一个丰富的插件生态系统来支持其它语言(C/C、C、Java、Python、PHP、Go 等)和运行时(.Net 和
向微软官方贡献 @types 包
在前端社区中,TypeScript 差不多是老生常谈的主题了。这不仅反映了 TypeScript 的流行度,也反映了它的学习上手成本。今天我们不来探讨 TypeScript 本身。而是记录一下我艰难地发布一个 包的历程。 a year ago<img src"https://p9juejin.byteimg.com/toscnik3u1fbp
TypeScript 4.2 有哪些新特性
TypeScript 4.2 发布了!对于不熟悉 TypeScript 的人来说,TypeScript 就是增加了静态类型和类型检查的 JavaScript。有了类型限制,你就可以精确的表达你的函数需要什么类型的参数以及返回什么类型的结果。同时,利用 TypeScript 的类型检查,你可以很容易避免一些常见错误,例如拼写错误或者忘记处理 null 和 un
Deno 运行时入门教程:Node.js 的替代品
Deno 运行时入门教程:Node.js 的替代品作者: 日期: 这几天假期,我学习了一下 。它是 Node.js 的替代品。有了它,将来可能就不需要 Node.js 了。这篇文章就是 Deno 的一个初步介绍,尝试回答为什么 Node.js 不能满足需要,以及 Deno 能够带给我们什么?以下内容主要基于
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
Webpack学习整理集锦【从最基础的demo入手,自己实现一个脚手架 】
前言本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。开源网址https://github.com/maomi
重学JavaScript(函数)闭包
序言学习JavaScript切勿好高骛远。正所谓贪多嚼不烂,前端标准和工具这几年的飞速发展,以及不时冒出的“新鲜玩意”让众多前端从业者惊呼:“学不动啦学不动啦!学习速度跟不上技术发展速度!我感到手忙脚乱、力不从心……"如果你有以上“症状”,请勿着急,这不过是你内心不安造成的。你为何追新?你又何苦追新?在根基不牢的情况下,就算盖楼盖到18层,再往上堆一块砖,都
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并