2023-01-30 周報

2023 第一篇周報，本週主要是 TypeScript 5.0 Beta 發佈，以及一些其他的技術新聞。

01 月 23 日 - 01 月 29 日#

本週技術新聞#

TypeScript 5.0 Beta 發佈 #

TypeScript 發佈了 5.0 beta 版，可以使用以下命令安裝：

$ 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 速度更快