TS 一些工具泛型的使用及其实现(续)

之前写了一篇 TS 一些工具泛型的使用及其实现, 但是一直没怎么使用 TS,回首看文章,发现自己都看不懂了。
期间内 TS 也有一些变化,所以这一篇将会承接上篇文章,分析解读更多的工具泛型,主要来自 utility-types项目的源码。
阅读本流水账需要对 TS 中的以下东西有所了解

  • extends
  • keyof
  • in
  • infer
  • &
  • |
  • ?
  • -?
  • +?
  • never
  • unkown
  • any
  • readonly
  • void

正文

ArrayElement

提取数组成员类型,
一个思路是 用 extends 限制数组类型, 然后用数组 key 类型为 number 的特性取出其属性类型

1
type ArrayElement<T extends readonly unknown[]> = T[number];

第二种写法的核心思路就是用 infer 来隐射 数组的属性类型

1
type ArrayElement<A> = A extends readonly (infer T)[] ? T : never

Exclude & Extract vs. Diff & Filter

TS 内置类型定义涵盖了 Exclude & Extract, 但是在它的官方文档又给出了另外的名字

1
2
type Diff<T, U> = T extends U ? never : T;
type Filter<T, U> = T extends U ? T : never;

就类型定义的代码而言,Exclude === Diff, Extract === Filter,蜜汁操作

NonNullable

从类型 T 中排除 null 和 undefined

1
type NonNullable<T> = Exclude<T, null | undefined>

Parameters

拿到函数的参数类型,不定参数的组织形式就是一个数组,参考 ArrayElement的第二种写法,利用infer去取到类型

1
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) =>  any ? P : never

ConstructorParameters

要拿到构造函数参数的类型,参考 Parameters,加上 new 即可

1
type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) =>  any ? P : never

InstanceType

获取实例类型,跟 ParametersConstructorParameters 差不多,不过这次不 infer 参数了,而是 infer 函数返回数据

1
type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) =>  infer R ? R : never

记一次 Content-Security-Policy 请求头的坑

公司一个项目用的 webpack-dev-server 进行代理服务,所有资源包括html,css,js等文件以及接口都是通过它进行访问,我想把本地开发效果给测试同事看,然后我把 webpack-dev-server 的 host 设置成 0.0.0.0,
然后有意思的来了,我通过 localhost:8080,127.0.0.1:8080,0.0.0.0:8080都可以访问,然而神奇的是通过lan_ip:8080却只能访问到html,其他资源请求都转化成 HTTPS 请求了。

Hexo Blog 访问优化备忘小记

之前使用 Netlify 进行自动部署应用,但是发现访问还是有些慢,索性花点心思把整个网站网络访问优化一遍。

CDN 优化

google fontfont-awesome 换成了国内的 CDN,jsdelivr 家的 CDN 国内访问速度还不错就懒得换了。

1
2
3
4
providers:
cdn: jsdelivr
fontcdn: https://fonts.loli.net/${type}?family=${fontname}
iconcdn: https://lib.baomitu.com/font-awesome/5.4.1/css/all.min.css

Lodash get 三个基础实现版本

接上篇,在 Vue 中你可以 这样 a.b.c.d 进行 watch,在 lodash 你也可以以同样的形式进行属性的读取,思索其中中源码实现才有了这篇文章
_.get 基本语法

1
2
3
4
5
6
7
// 基本语法
_.get(obj, path, "defaultValue");

_.get(obj, "a.b[0].c", "defaultValue");

// 或者 path 以数组的形式
_.get(obj, ["a", "b", "0", "c"], "defaultValue");

path 支持两种形式的传值,数组和字符串,我们需要转成统一的数组形式,便于取值

JS 最近进入 Stage 4 的两个提案

今天刷推特的时候看到 TC39 的成员说 js 的两个语法糖提案进入 stage 4,最终板上钉钉,修成正果。

  • Optional Chaining
  • Nullish Coalescing
    其中 Optional Chaining 在这之前的 TS 3.7 中就被引入了

Optional Chaining

在此之前使用我们通常获取一个多层级对象一个比较内层的属性,为了避免为空的情况不得不这样写

1
let prop = a.b && a.b.c && a.b.c.d // 取到值或者赋值为 undefined

习惯了 Lodash 之后

1
let prop = _.get(a, "b.c.d", undefined) // 可以自定义默认值

使用 Optional Chaining 之后

1
let prop = a?.b?.c?.d

Macbook Pro 外接 4K 显示器

双十一忍不住剁手买了台 4K 显示器,于是就有了这篇文章。

步骤一

禁用 SIP,先重启 Mac,摁住 Command + R 直到出现 Apple logo,松开进入 recovery mode,进入菜单栏找到 terminal,输入以下等待重启。

1
csrutil enable; reboot

步骤二

到这个repo中根据自己的 mac OS 版本下载对应的 patch 文件到本地,macOS >= 10.12,下载CoreDisplay Patcher,否则下载IOKit Patcherchmod +x修改成可执行权限后执行。然后重启电脑。

关于 Vue 的一些冷门技巧

watch

有时候我们会写一些这样的代码, 在 created 一个组件之后获取数据, 然后根据某个值得变动来获取数据, 正常套路是按照下面写的,

1
2
3
4
5
6
7
8
created() {
this.fetchUserList()
},
watch: {
searchText () {
this.fetchUserList ()
}
}

但是 watch 的 api 其实很复杂, 语法糖甜的掉牙了. 于是我们可以简化为

译:如何使用纯函数式 JavaScript 处理脏副作用

首先,假定你对函数式编程有所涉猎。用不了多久你就能明白纯函数的概念。随着深入了解,你会发现函数式程序员似乎对纯函数很着迷。他们说:“纯函数让你推敲代码”,“纯函数不太可能引发一场热核战争”,“纯函数提供了引用透明性”。诸如此类。他们说的并没有错,纯函数是个好东西。但是存在一个问题……

纯函数是没有副作用的函数。[1] 但如果你了解编程,你就会知道副作用是关键。如果无法读取 𝜋 值,为什么要在那么多地方计算它?为了把值打印出来,我们需要写入 console 语句,发送到 printer,或其他可以被读取到的地方。如果数据库不能输入任何数据,那么它又有什么用呢?我们需要从输入设备读取数据,通过网络请求信息。这其中任何一件事都不可能没有副作用。然而,函数式编程是建立在纯函数之上的。那么函数式程序员是如何完成任务的呢?

简单来说就是,做数学家做的事情:欺骗

Rxjs Scheduler 下的 eventloop

本文将简单介绍 event loop 在 RxJS 中运用. 偏重于 RxJS Scheduler 而不是 event loop

event loop

event loop 是一种任务调度机制, 用来处理异步任务, 在 JavaScript 单线程语言中, 在同一时间内只能只能处理一件事, 当我们遇到需要处理异步的情况, 不能让异步操作阻塞线程, 我们可以让异步任务先搁置, 先执行同步任务, 等异步时间来临再来执行异步任务, 这就是 event loop.

JavaScript 在执行过程中, 变量与对象会存入对中, 另外还会维护一个任务队列(包括宏任务队列, 微任务队列), 执行函数会被推入栈中, 一旦函数执行完毕就会从函数中推出, 一旦整个执行栈被清空, 就开始处理任务队列, 按照一定逻辑将任务推入执行栈中执行, 执行过程中可能会往任务队列中添加其他任务,微任务具有高优先级, 在单个宏任务的切换中间会检查执行整个微任务队列, 再去执行下一个宏任务

Vue 异步计算属性实现

前段时间在 GitHub 上看到一个 Vue 异步计算属性的库 - vue-async-computed, 将异步操作转化为计算属性, 例如这样用

1
2
3
4
5
6
7
8
9
10
11
new Vue({
data: {
userId: 1
},
asyncComputed: {
username () {
return Vue.http.get('/get-username-by-id/' + this.userId)
.then(response => response.data.username)
}
}
}

好奇其中原理, 看了源码, 了解其中巧妙的实现思路, 绘制了一张核心思路的原型图.

接下来我们实现一个简(阉)易(割)版本的 vue-async-computed 插件,

趁着 beforeCreatedata 中添加 asyncComputedkey, 使之响应式.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×