今天我们看一道 leetcode hard 难度题目：统计可以被 K 整除的下标对数目。题目给你一个下标从 0 开始、长度为 n 的整数数组 nums 和一个整数 k ，返回满足下述条件的下标对 (i, j) 的数目：0 <= i < j <= n - 1 且nums[i] * nums[j] 能被 k 整除。示例 1： {代码...} 思考首先想到的是动态规划，一个长度为 n ...

接着可视化搭建的理论抽象，我们开始勾勒一个具体的 React 可视化搭建器。精读假如我们将可视化搭建整体定义为 <Designer>，那么 API 可能是这样的： {代码...} componentMetas: 定义组件元信息的数组。componentTree: 定义组件树结构。只要注册了组件元信息与组件树，可视化搭建的画布就可以渲染出来了，这很好理...

对布局抽象来说，它关心的就是 可拖拽的组件 与 容器 的 DOM，至于这些 DOM 是如何创建的都可以不用关心，在这个基础上，甚至可以再做一套搭建或者布局框架层，专门实现对 DOM 的管理，但这篇文章还是聚焦在布局的实现层。

如上所示，如果 myLib 没有正确的开放 update 属性将会提示错误。但这种单测并不是我们要讲的类型。想一想，如果我们只开放 .update API 给用户，但框架内部可以使用全量的 .update、.add、.remove 方法，如何验证框架没有把不必要的属性也开放给了用户呢？

proposal-extractors 是一个关于解构能力增强的提案，支持在直接解构时执行自定义逻辑。概述 {代码...} 以上就是解构带来的便利，如果没有解构语法，相同的实现我们需要这么做： {代码...} 但上面较为原始的方法可以在对象赋值时进行一些加工，比如： {代码...} 解构语法就没那么简单了，想要实现类似的效果，需要退化到...

去重需要不断递归产生去重后结果，因此需要一个辅助变量 R 配合，并把 T 用 infer 逐一拆解，判断第一个字符是否在结果数组里，如果不在就塞进去：

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 57~62 题。精读Trim Right实现 TrimRight 删除右侧空格： {代码...} 用 infer 找出空格前的字符串递归一下即可： {代码...} 再补上测试用例的边界情况，\n 与 \t 后就是完整答案了： {代码...} Without实现 Without<T, U>，从数组 T 中移除...

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 49~56 题。精读Flip实现 Flip<T>，将对象 T 中 Key 与 Value 对调： {代码...} 在 keyof 描述对象时可以通过 as 追加变形，所以这道题应该这样处理： {代码...} 由于 Key 位置只能是 String or Number，所以 T[K] 描述 Key 会显示错误，我...

解决 TS 问题的最好办法就是多练，这次解读 type-challenges Medium 难度 41~48 题。精读ObjectEntries实现 TS 版本的 Object.entries： {代码...} 经过前面的铺垫，大家应该熟悉了 TS 思维思考问题，这道题看到后第一个念头应该是：如何先把对象转换为联合类型？这个问题不解决，就无从下手。对象或数组转联合类型的思...

TS 没有 “普通” 的运算能力，但涉及数字却有一条生路，即 TS 可通过 ['length'] 访问数组长度，几乎所有数字计算都是通过它推导出来的。

首先要思考 Diff 的计算方式，A 与 B 的 Diff 是找到 A 存在 B 不存在，与 B 存在 A 不存在的值，那么正好可以利用 Exclude<X, Y> 函数，它可以得到存在于 X 不存在于 Y 的值，我们只要用 keyof A、keyof B 代替 X 与 Y，并交替 A、B 位置就能得到 Diff：

所以这题如果能 “递归触发联合类型分配率”，就有戏解决啊。但触发的条件必须存在两个泛型，而题目传入的只有一个，我们只好创造第二个泛型，使其默认值等于第一个：

该题难点不在 Promise 如何处理，而是在于 { [K in keyof T]: T[K] } 在 TS 同样适用于描述数组，这是 JS 选手无论如何也想不到的：

Awaited 可以将 Promise 实际返回类型抽出来，按照名字可以理解为：等待 Promise resolve 了拿到的类型。下面是官方文档提供的 Demo：

理解为：如果 T 继承了 extends (...args: any[]) => any 类型，则返回类型 R，否则返回 any。其中 R 是什么呢？R 被定义在 extends (...args: any[]) => infer R 中，即 R 是从传入参数类型中推导出来的。

精读《@types react 值得注意的 TS 技巧》

前端精读已经写到第 123 篇了，大家已经不必担心它突然停止更新，因为我已养成每周写一篇文章的习惯，而读者也养成了每周看一篇的习惯。所以我想说的其实是一种更有生命力的自媒体运作方式，定期更新。一个定期更新的专栏比一个不不定期更新的专栏更有活力，也更受读者喜爱，因为读者能看到文章之间的联系，跟随作者一起...

1. 引言 javascript-knowledge-reading-source-code 这篇文章介绍了阅读源码的重要性，精读系列也已有八期源码系列文章，分别是： 精读《Immer.js》源码 精读《sqorn 源码》 精读《Epitath 源码 - renderProps 新用法》 精读《Htm - Hyperscript 源码》 精读《React PowerPlug 源码》 精读《syntax-parser 源码》 精读《...

caches 这个 API 是针对 Request Response 的。caches 一般结合 Service Worker 使用，因为请求级别的缓存与具有页面拦截功能的 Service Worker 最配。

1 引言 重回 “手写 SQL 编辑器” 系列。之前几期介绍了 词法、文法、语法的解析，以及回溯功能的实现，这次介绍如何生成语法树。 基于 《回溯》 一文介绍的思路，我们利用 JS 实现一个微型 SQL 解析器，并介绍如何生成语法树，如何在 JS SQL 引擎实现语法树生成功能！ 解析目标是： {代码...} 文法： {代码...} 这是本文...

自顶而下一般采用递归下降方式处理，称为 LL(k)，第一个 L 是指从左到右分析，第二个 L 指从左开始推导，k 是指超前查看的数量，如果实现了回溯功能，k 就是无限大的，所以带有回溯功能的 LL(k) 几乎是最强大的。LL 系列一般分为 LL(0)、LL(1)、LL(k)、LL(∞)。

1 引言 本期精读的文章是：8 React conditional rendering methods 介绍了八种 React 条件渲染方式。 模版条件渲染非常常见，遇到的时候往往会随机选择一种方式使用，那么怎么写会有较好的维护性呢？先一起了解下有哪八种条件渲染方式吧！ 2 概述 IF/ELSE 既然 JSX 支持 js 与 html 混写，那么交替使用就能解决条件渲染...

我发现，许多写了一年以上 Typescript 开发者，对 Typescript 对理解和使用水平都停留在入门阶段。造成这个现象的原因是，Typescript 知识的积累需要 刻意练习，使用 Typescript 的时间与对它的了解程度几乎没有关系。

1 引言 深入思考为何前端需要框架，以及 web components 是否可以代替前端框架？ 原文地址，建议先阅读原文，或者阅读概述。 2 概述 现在前端框架非常多了，如果让我们回答 “为什么要用前端框架” 这个问题，你觉得是下面这些原因吗？ 组件化。 拥有强大的开源社区。 拥有大量第三方库解决大部分问题。 拥有大量现成的第...

dva 之后，有许多基于 redux 的状态管理框架，但大部分都很局限，甚至是倒退。但直到看到了 rematch，总算觉得 redux 社区又进了一步。