MY 博客

Appearance

整理汇总一周看到的文章与学到的知识（2021-12-10 ~ 2021-12-16）

文章 ​

React 中的 TS 类型过滤原来是这么做的！ ​

内容 ​

如何理解这段 ts 类型代码？

typescript
type FilterConditionally<Source, Condition> = Pick<
    Source,
    {
        [K in keyof Source]: Source[K] extends Condition ? K : never;
    }[keyof Source]
>;

有几个基础知识要知道：

typescript
interface Example {
    a: string;
    b: string;
    c: number;
    d: boolean;
}

type Keys = keyof Example;
// 等价于 type Keys = 'a' | 'b' | 'c' | 'd'

Keyof 会拿到 key 的字符串

typescript
type Keys = 'a' | 'b' | 'c' | 'd';
type Obj = {
    [T in Keys]: string;
};
// Obj 的类型：
// type Obj = {
//     a: string;
//     b: string;
//     c: string;
//     d: string;
// }

in 可以拿到类型列表中的每一个元素，但根据用法，还必须要声明一个类型 T

typescript
interface A {}
interface B extends A {}

type C = B extends A ? number : string;
// type C = number

type D = A extends B ? number : string;
// type D = number

还可以使用条件判断来得出类型

typescript
type MarkUnwantedTypesAsNever<Source, Condition> = {
    [K in keyof Source]: Source[K] extends Condition ? K : never;
};

这里使用了泛型，其实泛型就相当于 JS 中的函数一样，你给我参数，我给你返回值，只不过 TS 的返回值是类型而已，这个结论同样也适用于非泛型，因为那种情况就相当于没有传入参数，就直接返回了一个类型

typescript
interface Example {
    a: string;
    b: string;
    c: boolean;
    d: number;
}

type Foo = MarkUnwantedTypesAsNever<Example, string>;
// type Foo = {
//     a: "a";
//     b: "b";
//     c: never;
//     d: never;
// }

根据如上分析，即可理解

typescript
type Value = { name: 'zero2one' }['name'];
// type Value = "zero2one"

索引访问接口

typescript
type Value = {
    name: 'zero2one';
    age: 23;
}['name' | 'age'];
// type Value = "zero2one" | 23

访问多个

typescript
type Value = {
    name: 'zero2one';
    age: never;
}['name' | 'age'];

// 等价于 type Value = "zero2one"

never 不能被访问到

这是可以加上索引访问了

typescript
type MarkUnwantedTypesAsNever<Source, Condition> = {
    [K in keyof Source]: Source[K] extends Condition ? K : never;
}[keyof Source];

即可得到

typescript
type MarkUnwantedTypesAsNever<Source, Condition> = {
    [K in keyof Source]: Source[K] extends Condition ? K : never;
}[keyof Source];

interface Example {
    a: string;
    b: string;
    c: number;
    d: boolean;
}

type Foo = MarkUnwantedTypesAsNever<Example, string>;
// type Foo = "a" | "b"

最后需要看一下 Pick，这是 ts 内置的

typescript
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

作用是筛选出类型 T 中指定的某些属性

typescript
interface A {
    a: 1;
    b: 2;
    c: 3;
    d: 4;
}

type C = Pick<A, 'a' | 'c'>;
// type C = {
//     a: 1;
//     c: 3;
// }

最终即可实现

typescript
type FilterConditionally<Source, Condition> = Pick<
    Source,
    {
        [K in keyof Source]: Source[K] extends Condition ? K : never;
    }[keyof Source]
>;

interface Example {
    a: string;
    b: string;
    c: number;
    d: boolean;
}

type Foo = FilterConditionally<Example, string>;
// type Foo = {
//     a: string;
//     b: string;
// }

感悟 ​

写的很好，尤其是这些例子设计，循序渐进。看的时候感觉一般，写的挺简单的，但让自己再输出一遍时，才知道不是那么一回事，能写出让读者觉得很简单的文章，还是很难的，需要一定功底。

这里我在复述时，想自己去优化一下，但发现内容几乎没有什么可以优化的地方了。可以看下作者的其他文章。

关于小程序的一切，读这一篇就够了～ ​

内容 ​

小程序并不是不需要安装，只是它容量小，下载的速度很快而已。小程序的架构都是基于双线程，分别是 js 执行线程、页面渲染线程，两者的交互需要 jsBridge，使用了发布订阅模式

感悟 ​

发布订阅模式好强呀，好多地方都用到了，比如 DOM 的监听事件、webpack 的 tapable 等等

本文还展示了些源码，看不懂，其实看的时候可以快速略过的

从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器 ​

内容 ​

使用 npm 的 preintsall 钩子加 node 的 process 获取命令行的输入，如果不是 pnpm，那么就报错退出 process.exit(1)

感悟 ​

标题有些长，废话有些多，标题说的也模糊，我本来以为是管理三方包版本的文章呢，唉，是我想多了

Dan Abramov 接受油管 UP 主的面试挑战，结果差点没写出来居中 ​

内容 ​

一些通用问题：自我介绍、let const、redux 使用场景（现在的话，会使用 react-query, relay, apollo 等一些现代的 react 请求状态库）。

dangerouslySetInnerHTML 这个 API 的使用时机：在服务端返回 html 字符串时，并且能确保这是安全的，那么就使用，如果是不安全的，那么要对 HTML 消毒（santize）

数据结构的使用（二叉树镜像反转），可以扩展出反转链表啥的。

找兔子问题

感悟 ​

很有趣的文章，没想到国外的面试和国内的没啥区别。兔子问题还是挺难的，我不会，没有什么思路，可以学习下

鸡汤 ​

年轻人真的很厉害，现在就有种感觉：学不过他们了，有一些你刚刚学会并使用的东西，并且引以为傲的东西，已经被人家总结在文档中了。

用什么语言或方法不重要，能解决问题最重要，做事要抓住根本。就像公司并不是所有的人都是研发，还有一大部分的销售，对于公司来讲，赚钱很重要。所以也不要总是沉浸在学习新语言、新知识的自我娱乐中，只要能解决问题，什么语言都可以。