用 typescript 写一个工具函数库

翟旭光

2019 年 11 月加入 Qunar 机票前端团队，目前在国内基础平台。喜欢工程化和 typescript，喜欢各种提升开发效率的工具，对这方面有浓厚的兴趣，有很多想法待实现。喜欢阅读源码，热衷于探索源码的乐趣，就像在深海探险，会因为偶然发现的一个冷僻的知识点或技巧而兴奋。

---

技术点介绍

• 工具函数的复杂类型的声明（难点）

• 用 ts-mocha + chai 做单元测试

• 用 ts + rollup 打不同模块规范的包

---

前言

先看一段代码

const {name = 'xxx', age} = { name: null, age: 18}
console.log(name);

name 输出的是 null，因为解构赋值的默认值只有当值为 undefined 时才会生效，这点如果不注意就会引起 bug。我们组内最近就遇到了因为这点而引起的一个 bug，服务端返回的数据，因为使用了解构赋值的默认值，结果因为值为 null 没有被赋值，而导致了问题。

那么如何能避免这种问题呢？

我们最终的方案有两种，第一种服务端返回数据之后递归的设置默认值，之后就不需要再做判断，直接处理就行。第二种是当取属性的时候去做判断，如果为 null 或 undefined 就设置默认值。为了支持这两种方案，我们封装了一个工具函数包 @qnpm/flight-common-utils。

这个工具包首先要包含 setDefaults、getProperty 这两个函数，第一个是递归设置默认值的，第二个是取属性并设置默认值的。除此之外还可以包含一些别的工具函数，把一些通用逻辑封装进来以跨项目复用。比如判空 isEmpty，递归判断对象和属性是否相等 isEqual 等。

因为用了 typscript，通用函数考虑的情况很多，为了更精准的类型提示，类型的逻辑写的很复杂，比实现逻辑的代码都多。

---

使用

npm install @qnpm / flight - common - utils -- save -- registry =公司 npm 仓库

或者

yarn add @qnpm / flight - common - utils -- registry =公司 npm 仓库

---

实现工具函数

这里只介绍类型较为复杂的 setDefaults、getProperty。

setDefaults

这个函数的参数是一个待处理对象，若干个默认对象，最后一个参数可以传入一个函数自定义处理逻辑。

functionsetDefaults(obj,...defaultObjs){
}

希望使用时这样调用：

setDefaults ({ a : { b : 2 }}, { a : { c : 3 }} ); // {a:  {b: 2, c: 3}}

这里的类型的特点是函数返回值是原对象和一些默认对象的合并，并且参数个数不确定。所以用到了函数类型的重载，加上 any 的兜底。

type SetDefaultsCustomizer = (objectValue: any, sourceVal