十五周刊 - 93

2023 第 5 周周报

欢迎来到十五周刊，我们每周都会分享有价值的前端技术文章，让你随时掌握前端的最新动态。此外，我们还会介绍一些实用的软件工具，帮助你提升工作效率。同时，我们也会分享一些个人生活感悟，希望通过分享，能够给你的生活带来一些启示和思考。希望你会喜欢我们的内容。

本周技术新闻 TypeScript 5.0 Beta 发布 Vite 4.1.0 beta 发布美团2022技术年货 The Pens of 2022 on CodePen 其他新闻 GitHub 用户数到达 1 亿 ChatGpt 即将开放 API 几个使用 OpenAI 的项目文章推荐工具推荐 OSS Insight YouGlish QuickReference vhs

2023 第一篇周报, 本周主要是 TypeScript 5.0 Beta 发布, 以及一些其他的技术新闻。

01月23日-01月29日

本周技术新闻

TypeScript 5.0 Beta 发布

TypeScript 发布了 5.0 beat 版，可以使用以下命令安装：

bash
1$ npm install typescript@beta

简述几个比较重要的更新：

1. Decorators 装饰器

EcmaScript 的装饰器标准已经进入 Stage3，这意味着装饰器将会成为 JavaScript 的标准特性。

在过去的版本中 TypeScript 已经支持了装饰器，但需要手动开启 experimentalDecorators 编译选项。在 5.0 版本中，装饰器已经成为了正式特性，不需要再开启编译选项。

下面是一个简单的装饰器的例子：

ts
1function loggedMethod(
2  originalMethod: (...args: any[]) => any,
3  context: ClassMethodDecoratorContext
4) {
5  const methodName = String(context.name);
6
7  return function (this: any, ...args: any[]) {
8    console.log(`LOG: Entering method '${methodName}'.`);
9    const result = originalMethod.call(this, ...args);
10    console.log(`LOG: Exiting method '${methodName}'.`);
11    return result;
12  };
13}
14
15class Person {
16  name: string;
17  constructor(name: string) {
18    this.name = name;
19  }
20
21  @loggedMethod
22  greet() {
23    console.log(`Hello, my name is ${this.name}`);
24  }
25}
26
27const p = new Person("Jack");
28p.greet();
29
30// Output:
31//
32//   LOG: Entering method.
33//   Hello, my name is Jack.
34//   LOG: Exiting method.

2. [object Object], 类型参数

TypeScript 5.0 支持了 const 类型参数，这意味着你可以使用 const 修饰符来限制类型参数的值为常量。

ts
1const routes = <T>(routes: T[]) => {
2  const addRedirect = (from: T, to: T) => {
3    // ...
4  };
5  return {
6    addRedirect,
7  };
8};
9
10const router = routes(["/home", "/about", "/contact"]);
11router.addRedirect("/home", "/about"); // 类型正确
12router.addRedirect("/home", "/blog"); // 类型正确

在上面的例子中 router.addRedirect("/home", "/blog") 不会报错，因为 from 和 to 的类型参数都是 string，但是这样的代码是不正确的，因为 /blog 并不是 routes 的参数。

使用 const 修饰符可以限制类型参数的值为常量，这样就可以避免上面的错误。

ts
1const routes = <const T extends string>(routes: T[]) => {
2  const addRedirect = (from: T, to: T) => {
3    // ...
4  };
5  return {
6    addRedirect,
7  };
8};
9
10const router = routes(["/home", "/about", "/contact"]);
11router.addRedirect("/home", "/about"); // 类型正确
12router.addRedirect("/home", "/blog"); // 类型错误: TS 推断出 from 和 to 的类型为 "/home" | "/about" | "/contact"

3. 所有的 `Enum` 都改为 `Union enums`

在 4.9 中：

ts
1enum LogLevel {
2  DEBUG,
3  WARN,
4  ERROR,
5}
6
7const log = (level: LogLevel) => {
8  // ...
9};
10
11log(LogLevel.DEBUG); // 类型正确
12log(0); // 类型正确
13log(123456); // 类型正确

旧版的 TypeScript 中使用 enum 作为类型时是不安全的，在上面的例子中 log(123456) 是不会报错的，只要是数字就可以通过检查。

在 5.0 中，所有的 enum 都是 Union enums，这意味着 enum 的值只能是 enum 的成员。

ts
1enum LogLevel {
2  DEBUG,
3  WARN,
4  ERROR,
5}
6
7const log = (level: LogLevel) => {
8  // ...
9};
10
11log(LogLevel.DEBUG); // 类型正确
12log(0); // 类型正确
13log(123456); // 类型错误

另外需要注意：

ts
1enum LogLevel {
2  DEBUG = "debug",
3  WARN = "warn",
4  ERROR = "error",
5}
6
7const log = (level: LogLevel) => {
8  // ...
9};
10
11log(LogLevel.DEBUG); // 类型正确
12log("debug"); // 类型错误: 注意数字枚举与字符串枚举表现不一致

编者按: TS 中的 enum 为了迎合 js 有一些奇怪的行为，比如反向映射，这里不做过多介绍，关于是否使用 enum 网上有很多讨论，大家可以自行搜寻，我个人对 enum 的态度是能不用就不用（大多数情况 enum 都可以被 object as const 以及 union type 取代），如果需要使用请一定明确使用目的，了解可能存在的问题。

4. 自动填充 `switch` 语句的 `case`

case 语句可以穷尽所有的可能性，并自动填充。

5. 速度及尺寸优化

TypeScript 5.0 有一些性能优化，与 4.9 的对比见下图：

Vite 4.1.0 beta 发布

Vite 4.1.0 beta 发布，主要是一些 bug 修复。

我们顺便回顾一下 vite 的发展历程：

1. Vite 1

Vite 1 的主要目标是为 Vue 组件提供快速的开发体验，它的核心是基于浏览器原生的 ES Module 实现的。

2. Vite 2

Vite2 完全重构了代码，使其可以支持任何框架，所有特定于框架的支持都委托给了插件。
Vite2 提供了 SSR 支持
支持旧版本浏览器

3. Vite 3

使用 Vuepress 构建全新文档
支持模板
减小构建体积
单测与 E2E 测试迁移到 Vitest

同时， Vite 团队决定每年至少一个大版本，以配合 Node.js 的 EOL。

4. Vite 4

升级到 Rollup 3
开发过程中使用 SWC 的新 React 插件
- @vitejs/plugin-react 是一个使用 esbuild 和 Babel 的插件
- @vitejs/plugin-react-swc 是一个新插件，在构建过程中使用 esbuild，但在开发过程中使用 SWC 取代 Babel，冷启动以及 HMR 速度更快