TypeScript 类型 tips
从对象类型衍生一个 union 类型
export const fruitCounts = {
apple: 1,
pear: 4,
banana: 26,
}
type FruitCounts = typeof fruitCounts
/*
type SingleFruitCount =
| {
apple: number
}
| {
banana: number
}
| {
pear: number
}
*/
type SingleFruitCount = {
[K in keyof FruitCounts]: {
[k2 in K]: FruitCoun...
使用 rollup.js 按需编译构建 TS 项目
假设你有以下项目结构：
```
project
│ README.md
│ rollup.config.js
│ tsconfig.json
└───package
│ └───src
│ │ └───core
│ │ │ │ index.ts
│ │ │ │ file.ts
│ │ │
│ │ └───plugin
│ │ │ └───a
│ │ │ │ index.ts
│ │ │ └───b
│ │ │ │ index.ts
```
如果能够分别把 src 文件夹下面的 core 和 plugi...
Vite / TS / Vue3 配置代码错误提示
Vite + TS + Vue3 配置代码错误提示
在 Vite 中，当类型检测工具检测到错误时，项目还是可以正常运行的，如果需要在终端和网页中弹出错误提示，则需要新增一个 Vite 配置：
npm install vite-plugin-checker vue-tsc -D
在 Vite.config.ts 中新增 plugin:
import checker from 'vite-plugin-checker'
export default () => {
plugins: [
checker({
vueTsc: true
})
]
}
重新启动以后，如果代码中出现类型错误，终端和网页中都会弹出错误提示。
在线演示：https://stac...
ECMA 2022 array find from last
这是一个新提案，在 ECMA 2022（第十三版本） 中已经实施，目前大多数浏览器都已经支持。
为什么有这个提案？
在一个数组中查找一个元素是一种非常常见的编程模式。
这个提案还有一个重要的原因：更具语义化，使操作能够更直观的展示。
这个提案对于一些对性能敏感的操作来说是有一定作用的，比如在 React render function 中。
ECMAScript 当前支持两种方法寻找数组中的某个元素的索引：
Array.prototype.indexOf
Array.prototype.lastIndexOf
还有 Array.prototype.find 方法用来寻找数组中的某个元素，Array.prototype.fin...
函数柯里化（Currying）
柯里化是函数的一种高级实现。它不仅在 JavaScript 中用到，其他语言同样也有柯里化函数（Curring）。
柯里化是函数的一种转换，它把一个函数 fn(a, b, c) 转换成 fn(a)(b)(c)这样的调用形式。
柯里化不会调用一个函数，而是转换一个函数。
让我们通过示例来理解柯里化函数是什么：
我们创建一个柯里化函数 curry(f) ，它将把一个接收两个参数的函数 f 进行柯里化，也就是说，curry(f) 把 f(a,b)这个函数转换成 f(a)(b) 这种形式。
function curry(f) { // curry(f) 进行柯里化转换
return function(a) {
return function(b) {
retu...
什么时候使用 useMeo、useCallback（译）
什么时候应该使用 useMemo 和 useCallback 呢？
先说结论：大多数情况下都不需要用。
useMemo 和 useCallback 的作用
两者的作用都用于性能优化，但是性能优化也是有成本的。使用它们不一定能提升性能，但是一定会增加使用成本。
所以到底什么时候用 useMemo 和 useCallback
React 提供这两个 hooks 有以下原因：
引用比较造成的 re-render
复杂（耗费性能）的计算
引用比较
在 React 中，两种情况会对引用比较造成影响：
依赖项（dependency list）
例如以下代码会存在一个问题：
function Foo({bar, baz}) {
const options = {...
正则表达式字符类
假设有这样一个电话号码：+7(903)-123-45-67,现在需要把它转换成一个纯数字：79031234567。
那首先需要找到并且移除非数字的字符。字符类（Character classes）就可以派上用场了。
character class 是一个特殊的符号，用来匹配某个特定的字符。
\d 用来匹配任意一个数字，例如找到电话中的第一个数字：
let str = "+7(903)-123-45-67";
let regexp = /\d/;
alert( str.match(regexp) ); // 7
在没有 g 符号的情况下，上面的正则表达式只会找第一个符合条件的字符，即 \d。
添加 g 符号即可找到所有数字：
let str = "+7(903)-12...
React 18 新特性 Automatic batching
React-18-新特性-Automatic-batching（译）
简介
React 18 新增了一个新特性：Automatic batching，用来提升性能，此特性在 React 18 中会默认启用，这篇文章将会介绍什么是 batch，在 React 18 以前它是怎么工作的，在 React 18 之后有哪些改变。
什么是 batching?
batching 即在更新数据 data 时，如果存在多个 setState，React 会把多次的 setState 操作合并成一次，以减少 re-render 次数并提升性能。
例如：假如在一次鼠标点击事件中，使用了两次 setState 操作，React 总是会把两次 setState 操作合并成一次，所以两次 setSta...
50 post articles, 7 pages.