RichTalk 快报 第 10 期

随便走走，看看风景，听听音乐，拍拍照，放空自己。

这里是Tech 快报，每两周为你带来新鲜的技术资讯，如果想第一时间收到更新请关注本知识库。 本期快报速览：

• Typescirpt 4.9
• 从零实现一个迷你 Webpack
• 前端架构师的一些思考和总结
• 重新理解 Web

头条

TypeScript 4.9

访问入口

• 新增satisfies操作符
• 在 classes 中包含自动访问器 accessor
• 支持使用in运算符缩小 Unlisted Property
• 与 NaN 直接比较时报错
• File-Watching 使用文件系统事件
• 在编辑器中支持 “删除未使用的导入” 和 “排序导入” 命令
• return 关键字的 go-to-definition（找到函数定义的位置） 功能

新增 satisfies 操作符

该操作符的意义在于既可以确保某些表达式匹配某些类型，又要保留该表达式的最具体类型以用于推理目的。 假如现在有如下场景，我们期望让这段代码不报错：

type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Color, string | RGB>;

const palette: Palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
};

// Error: 类型“string”上不存在属性“join”
const redComponent = palette.red.join();

// Error: 类型“RGB”上不存在属性“toUpperCase”。
const greenNormalized = palette.green.toUpperCase();

常见的操作方式有两种：

• as 断言
• 更加精细的类型定义

const redComponent = (palette.red as RGB).at(0);
const greenNormalized = (palette.green as string).toUpperCase();

type StringColor =  "green";
type RGBColor = "red" | "blue";
type RGB = [red: number, green: number, blue: number];

type StringColorPalette = Record<StringColor, string>;
type RGBColorPalette = Record<RGBColor, RGB>;
type Palette = StringColorPalette & RGBColorPalette;

const palette: Palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
};

const redComponent = palette.red.join();
const greenNormalized = palette.green.toUpperCase();

使用 satisfies 操作符后，它将自动做类型推理：

type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Color, string | RGB>

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Palette;

// success
const redComponent = palette.red.join();
// success
const greenNormalized = palette.green.toUpperCase();

新增 accessor 访问器

自动访问器的声明就像类的属性一样，只是它们用 accessor 关键字声明。

class Person {
  accessor name: string;

  constructor(name: string) {
    this.name = name;
  }
}

自动访问器会转化为具有无法访问的私有属性的获取和设置访问器。

class Person {
  #__name: string;

  get name() {
    return this.#__name;
  }
  set name(value: string) {
    this.#__name = name;
  }

  constructor(name: string) {
    this.name = name;
  }
}

与 NaN 比较

主要是为了防止新手在编写代码时会直接使用数据与 NaN 比较造成程序异常。在4.9.3中与 NaN 比较时直接报错，在4.9版本之前，不会

function isN(num: number) {
  // Error: 此条件将始终返回“false”。你是想使用 "Number.isNaN(num)" 吗?
  return num === NaN;
}

Typescirpt 4.9 代码DEMO：

精选

从零实现一个迷你 Webpack

访问入口 这是一篇实战文章，以打包结果为目标，实现一个简易版 webpack，支持单入口文件的打包，不涉及插件、分包等。阅读这篇文章，你可以了解到以下内容：

• 如何匹配 Loader处理原始文件
• 如何在 AST 语法树中替换 import 加载语法
• 如何处理模块依赖
• 如何生成打包文件

前端架构师的一些思考和总结

访问入口 这是一篇议论文，主要阐述了一个重要的理念：不是人人都是架构师，但是人人都可以参与架构设计，不要认为架构这件事情与我无关。 架构师要做好的四件事情：

1. 创造价值
2. 控制风险
3. 平衡投入与产出
4. 做好传承

前端架构师需要具备的特质：

1. 了解用户体验
2. 有审美能力
3. 看到别人看不到的问题，解决别人解决不了的问题
4. 良好的沟通协调能力
5. 把复杂的系统想透彻想清晰
6. 对未来的发展有自己的思考与判断

其实做架构设计，并不代表一定要有一个架构师的头衔。每个人都可以参与到架构设计中来，只要心中有大局有架构思维，能理解当前架构设计，不断更好的优化和执行，就能写出好代码做出好架构，提升整体的凝聚力和战斗力。

重新理解 Web

访问入口 这是一篇科普文，作者对web应用构建，前端处理技术以及web的八大能力进行了详细的阐述。狭义上的web一般指从浏览器上访问的web页面，但是从广义上，只要具备了web八大能力就可以称做是web。

1. 分发能力：访问入口的分发
2. 解绑能力：分发的粒度不能只是分发整个应用，而是要分发具体的内容
3. 混搭能力：能够以流程化的方式串联起来
4. 即用能力：免安装，按需访问
5. 动态能力：动态加载，内容可以动态生成
6. 共创能力：普通用户也可以参与内容的产出
7. 跨平台能力：支持在不同的设备上访问
8. 协作能力：实时多人的协作与互动

把产品web化的好处有很多，包括简化了客户端计算机负荷，减轻了系统维护与升级的成本及工作量，降低了用户的使用成本。

动态

Parcel v2.8.0

访问入口 Parcel v2.8.0 的热更新比 Turbopack 快 68%(根组件)，比 Vite 快 74%(叶组件)。同时此版本带来了全新的打包算法、改进了自动代码拆分、提升了大型项目的构建性能，以及优化 Tree Shaking 使包体积减少 50%。