前端夜点心

node 环境与浏览器环境的一个主要区别是 document 和 window 对象的缺失。尽管现代的前端开发中源码对 DOM 和 BOM 的直接操作往往非常有限，但在单元测试层面，他们的存在是必不可少的——可以用来重建一个特定的浏览器版本；用来还原一种特定的缓存状态；用来断言…

TS 在遇到以下这些条件语句时，会在语句的块级作用域内「收紧」变量的类型，这种类型推断的行为称作类型守卫 (Type Guard)。 类型守卫可以帮助我们在块级作用域中获得更为精确的变量类型，从而减少不必要的类型断言。下面通过一些具体的例子来帮助大家理解这个看起来有点抽象的概念…

里面声明的 count 状态和 increaseCount 方法我们暂时都没有用到。现在假设有一个奇葩需求：每当用户缩放浏览器窗口的时候，就打印这个 count 并且给他加一。我们应该如何实现这个监听的过程呢？ 容易想到，为了监听视口大小，需要在组件挂载的时候给 window …

今天的夜点心关于 ECMAScript 的两个带有 ? 的新提案。 这些语法大同小异（后面的三种写法的 . 不要忘了哦），本质都是帮助我们减少一些判断值是否是 null 或者 undefined 的条件语句的书写。这样面对一个对象，原本的安全取值方式： 且逻辑完全等价。 无需更…

现在假设我们需要实现一个名为 promisify 函数，它的功能有些类似 then 方法：接受一个值，如果它已经是 Promise 了，就直接返回；如果不是，就把它包在一个 Promise 中返回。这个需求实现起来不难： 上面的实现通过范型 T，声明了入参 input 的类型。…

这样的类型推断策略在大部分的情形下比较通用，但在个别情形下会显得有些棘手。例如我们想实现一个 React 中的自定义 Hook。这个 Hook 能通过 Ref 维护一个状态。它的返回值与 useState 类似是一个元组：第一项是该状态的值，第二项是该状态的 setter 上面…

副作用（side-effects）说得直白一点就是与程序外部的世界的交互作用，比如改变显示屏的界面展示，读写后端数据库中的内容，副作用让我们的应用得以与外部世界发生相互以实现功能。如果一段代码完全没有副作用，那执行完以后你只会发现电脑热了一点（这其实也是一种副作用）。所以可以说…

CSS 的特性不断增强，预编译框架也层出不穷，但是即使使用 cssModules 这样的 scope 技术，我们仍需要一些范式来指导我们在局部更规范合理地给类取名字。 不同的范式的侧重不同，有些范式可以相互兼容组合，有些不能。他们大都是为了达成以下目标诞生的： OOCSS 提倡…

开发中我们会遇到一类逻辑，他们与特定的类没有耦合关系，甚至与特定的接口（interface）也没有耦合关系。我们可以把他们抽离出来，并通过某种语法再添回到特定的属性和方法上去，实现逻辑的解耦和复用，这便是修饰器。 在基于 TypeScript 开发的库中时常能见到修饰器的身影（…