2023-01-30 周报

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

01 月 23 日 - 01 月 29 日#

本周技术新闻#

TypeScript 5.0 Beta 发布 #

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

$ npm install typescript@beta

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

1. Decorators 装饰器#

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

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

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

function loggedMethod(originalMethod: (...args: any[]) => any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name)

  return function(this: any, ...args: any[]) {
    console.log(`LOG: Entering method '${methodName}'.`)
    const result = originalMethod.call(this, ...args)
    console.log(`LOG: Exiting method '${methodName}'.`)
    return result
  }
}

class Person {
  name: string
  constructor(name: string) {
    this.name = name
  }

  @loggedMethod
  greet() {
    console.log(`Hello, my name is ${this.name}`)
  }
}

const p = new Person('Jack')
p.greet()

// Output:
//
//   LOG: Entering method.
//   Hello, my name is Jack.
//   LOG: Exiting method.

2. `const` 类型参数 #

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

const routes = <T>(routes: T[]) => {
  const addRedirect = (from: T, to: T) => {
    // ...
  }
  return {
    addRedirect,
  }
}

const router = routes(["/home", "/about", "/contact"])
router.addRedirect("/home", "/about") // 类型正确
router.addRedirect("/home", "/blog") // 类型正确

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

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

const routes = <const T extends string>(routes: T[]) => {
  const addRedirect = (from: T, to: T) => {
    // ...
  }
  return {
    addRedirect,
  }
}

const router = routes(["/home", "/about", "/contact"])
router.addRedirect("/home", "/about") // 类型正确
router.addRedirect("/home", "/blog") // 类型错误: TS 推断出 from 和 to 的类型为 "/home" | "/about" | "/contact"

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

在 4.9 中：

enum LogLevel {
  DEBUG,
  WARN,
  ERROR,
}

const log = (level: LogLevel) => {
  // ...
}

log(LogLevel.DEBUG) // 类型正确
log(0) // 类型正确
log(123456) // 类型正确

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

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

enum LogLevel {
  DEBUG,
  WARN,
  ERROR,
}

const log = (level: LogLevel) => {
  // ...
}

log(LogLevel.DEBUG) // 类型正确
log(0) // 类型正确
log(123456) // 类型错误

另外需要注意：

enum LogLevel {
  DEBUG = 'debug',
  WARN = 'warn',
  ERROR = 'error',
}

const log = (level: LogLevel) => {
  // ...
}

log(LogLevel.DEBUG) // 类型正确
log('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 速度更快