大家好，我是 CUGGZ。祝大家新年快樂呀~

本文將回顧并總結 2022 年 JavaScript 生態(tài)系統(tǒng)中最重要的發(fā)展以及 2023 年的發(fā)展趨勢！

大綱：

1. TypeScript
2. React
3. Vue
4. 服務端渲染（SSR）
5. Node.js、Deno、Bun

1、TypeScript

回顧 2022 年，事實證明，即使在這樣一個成熟穩(wěn)定的生態(tài)系統(tǒng)中，也會發(fā)生一些有趣的事情。

類型會出現在 JavaScript 中嗎？

3 月初，TypeScript 背后的公司微軟準備了一份 JavaScript 標準提案。它的內容側重于使用類似于 TypeScript 中已知類型的類型來豐富語法。為了保持向后兼容性并且不改變語言的基礎，微軟建議解釋器將類型視為與注釋相同（完全忽略它們）。這會將類型排除在應用邏輯之外，但會通過將語言服務器和類型檢查器連接到 IDE 來提高代碼的可讀性和開發(fā)效率。

上面顯示的行為可能與當前的 JSDoc 行為相似。但是，新提案比該解決方案具有顯著優(yōu)勢。首先，Microsoft 建議的格式比 JSDoc 更簡潔和可讀。其次，JSDoc 的功能受到嚴重限制（至少很難使用它定義泛型）。

// —-----------------------------------
// JSDoc
// —-----------------------------------

/**
 * @param {string}  p1 - 字符串參數.
 * @param {string=} p2 - 可選參數（閉包語法）
 * @param {string} [p3] - 可選參數（JSDoc語法）
 * @param {string} [p4="test"] - 帶默認值的可選參數
 * @return {string} - 結果
 */
function stringsStringStrings(p1, p2, p3, p4) {
   /* ... */
}
// —-----------------------------------
// 帶有類型注釋的JavaScript
// —-----------------------------------
function stringsStringStrings(p1: string, p2?: string, p3?: string, p4 = "test"): string {
    /* ... */
}

那JavaScript 中的類型是否意味著 TypeScript 的終結呢？在早期階段，JavaScript 中的類型可能比 JavaScript 中已知的類型更原始。TypeScript 還提供基于代碼轉換的功能，例如枚舉。在這方面，JavaScript 不太可能很快趕上 TypeScript。

從 2022 年 3 月開始，該提案的工作進展不大，一直停留在 Stage 1（整個過程分為 4 個階段）。但是，天正在由微軟處理，所以該提案應該會在 2023 年回歸。

TypeScript 的新功能

在過去的一年里，TypeScript 發(fā)布了 3 個新的版本：4.7、4.8、4.9。TypeScript 團隊的開發(fā)人員花費了大量時間來優(yōu)化性能并更好地處理更多邊緣情況。在這些新特性中，有一個新功能令人眼前一亮：satisfies 操作符。

下面來通過官方文檔中的示例來解釋新運算符的工作原理，假設需要在以下代碼中添加類型：

// 每個屬性可以是字符串或 RGB 元組
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

// 在“red”上使用數組方法
const redComponent = palette.red.at(0);

// 在“green”上使用字符串方法
const greenNormalized = palette.green.toUpperCase();

我們可能想到的就是定義顏色的類型并使用 Record 類型。在這種情況下，就被迫執(zhí)行危險的轉換操作：

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]
};

// 在“red”上使用數組方法
const redComponent = palette.red.at(0);

// 在“green”上使用字符串方法
const greenNormalized = palette.green.toUpperCase();

此問題的解決方法就是使用新的 satisfies 運算符，它將在賦值時驗證類型，但不會影響 TypeScript 推斷的類型。這聽起來很復雜，下面來通過一個簡單的例子來說明：

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;

// 這兩種方法仍然可用
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

// —-----------------------------------
// 通過 satisfies 捕獲錯誤的示例
//  —-----------------------------------

const spelloPalette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255] // 捕獲到錯別字
} satisfies Palette;

// 捕獲到缺少屬性
const missingColorPalette = {
    red: [255, 0, 0],
    bleu: [0, 0, 255]
} satisfies Palette;

const wrongColorTypePalette = {
    red: [255, 0], // 捕獲到缺少元素
    green: "#00ff00",
    bleu: [0, 0, 255]
} satisfies Palette;

TypeScript 的未來

2023 年 3 月初將發(fā)布 TypeScript 5.0。值得注意的是，TypeScript 并不遵循語義版本控制。這意味著新的主要版本應該帶來一系列激動人心的變化，但不一定是重大變化。

查看 TypeScript 存儲庫，可以瞥見一些即將推出的功能。首先，TypeScript 被重寫為模塊（之前是基于命名空間），減少了 25% 的包大小，提高了 10% 的編譯速度。TypeScript 還致力于為任何文件類型提供原生 import 支持。種種跡象都表明，2023 年對于 TypeScript 來說，肯定會是比 2022 年更有趣的一年。

2、React

在 React 17 發(fā)行兩年后，Meta 終于發(fā)布了下一個主要版本：18.0。與以前的版本不同，從API 的角度來看，上一版本沒有引入顯著的新穎之處，而這一版本充滿了令人興奮的功能。

React 18 和并發(fā)模式

這里說的并發(fā)是關于對渲染進行排隊、排定優(yōu)先級以及添加中止正在進行的渲染的能力的。

可以從并發(fā)模式中獲益的典型示例就是與搜索字段進行交互。當用戶按下鍵盤上的一個鍵時，即使是更新文本字段的最輕微延遲也會讓用戶感覺到有問題。當涉及到搜索結果時，稍微延遲甚至是比較自然的。在這種情況下，顯然有優(yōu)先級和非優(yōu)先級渲染器需要處理。此外，如果用戶能夠比 React 渲染組件輸入的更快，那么渲染中間搜索狀態(tài)是不可取的。在這種情況下，渲染取消就可以發(fā)揮作用，只要出現更新版本的組件，就會取消之前的渲染。

那使用防抖函數是不是也可以達到類似的效果呢？React 18 之前的技術與并發(fā)模式之間的區(qū)別在于，之前，渲染是同步完成的，用戶無法在渲染期間與頁面進行交互。在并發(fā)模式下，當隊列中出現優(yōu)先級較高的渲染時，優(yōu)先級較低的渲染將被中斷。通過中止優(yōu)先級較低的渲染，頁面應該會響應更快。

使用此功能，可以以低優(yōu)先級在屏幕外呈現組件（以便可以緩存已訪問的頁面，或者提前渲染用戶最有可能訪問的頁面）。由于使用了優(yōu)先級，這些操作不會影響界面的響應性，因為它們只會以較低的優(yōu)先級執(zhí)行。

下面來看一個實際的例子，低優(yōu)先級更新必須包裝在 startTransition 方法中，可以通過 useTransition() Hooks 訪問它：

export default function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() {
      setCount((c) => c + 1);
    });
  }

  const advancedCounter = useMemo(
    () <AdvancedCounter count={count} />,
    [count]
  );

  return (
    <>
      {/*點擊按鈕后，直到低優(yōu)先級渲染完成，div才會改變不透明度*/}
      <div style={{ opacity: isPending ? 0.8 : 1 }}>
    {/*只有在所有高優(yōu)先級渲染完成后，下面的組件才會更新。*/}
    {/*若用戶連續(xù)點擊增加按鈕，則只有最后一次渲染對用戶可見。*/}
        {advancedCounter}
        <button onClick={handleClick}>+1</button>
      </div>
    </>
  );
}

useDeferredValue Hook 也已添加到 API 中。如果在高優(yōu)先級渲染中調用此 Hook，它將返回前一個渲染的值。這樣引用就不會改變，這將使渲染更快，因為不會重新渲染虛擬 DOM 樹的一部分。完成高優(yōu)先級渲染后，將安排低優(yōu)先級渲染，其中 Hook 將返回新值并渲染更新的組件。

export default function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((c) => c + 1);
  }

  const deferredCount = useDeferredValue(count);

  const advancedCounter = useMemo(
    () <AdvancedCounter count={deferredCount} />,
    [deferredCount]
  );

  return (
    <>
      <div>
        {/*只有在所有高優(yōu)先級渲染完成后，下面的組件才會更新。*/}
    {/*若用戶連續(xù)點擊增加按鈕，則只有最后一次渲染對用戶可見。*/}
        {advancedCounter}
        <button onClick={handleClick}>Increase counter</button>
      </div>
    </>
  );
}

React 的未來

我們不太可能在 2023 年看到 React 新的主要版本。可以預見，有些功能不會等到 React 19，而是會進入 React 18 的下一版本。

React 團隊目前正在開發(fā)的最大和最受期待的功能可能是 React 服務端組件。這并不是目前正在開發(fā)的唯一功能。React 團隊正在開發(fā)一個 <Offscreen />? 組件，它將允許在不將元素附加到 DOM 的情況下渲染屏幕。另一個正在開發(fā)的功能是一個編譯器，它可以在需要的地方自動添加 useMemo? 和 useCallback。

3、Vue

2022 年，Vue 只發(fā)布了一個主要版本。令人驚訝的是，它不是另一個 Vue 3，而是 Vue 2 的最終版本。此外，我們終于可以通過 Nuxt 3 獲得服務端渲染。

Vue 2.7

Vue 2.7 是 Vue 2 的最新版本，將支持到 2023 年底。簡而言之，這個版本將 Vue 3 中最重要的功能添加到 Vue 2 中。通過這種方式，增量遷移應該會變得更加簡單。

Vue 2.7 中最重要的功能是 Composition API，許多人稱之為 Vue 的 React Hooks。該 API 由 3 個組件組成：Reactivity API（ref 和 reactive）、Lifecycle Hooks（onMounted/onUnmounted）和依賴注入（provide/inject）。重要的是，所有新功能的行為和類型都與 Vue 3 100% 兼容。

// 舊的 Options API
<script>
export default {
  data() {
    return {
      name: 'John',
    };
  },
  mounted() {
    console.log(`Hello ${this.name}`);
  },
};
</script>

<template>
  <p>Hello {{ name }}!</p>
</template>

// 新的 Composition API
<script setup> 
const name = ref(0);

onMounted(() {
  console.log(`Hello ${name.value}`);
});
</script>

<template>
  <p>Hello {{ name }}!</p>
</template>

Vue 3.3

Vue 3.3 原本應該在 2022 年底發(fā)布，但它的發(fā)布已經推遲到 2023 年。不過，可以看看 Vue 2023 年會發(fā)布什么。

第一個期待已久的功能是 <Suspense />。它將啟用臨時組件的渲染，直到加載完樹中的所有異步組件。

<Suspense>
  <!-- 具有嵌套異步依賴項的組件 -->
  <Dashboard />

  <!-- 通過 #fallback 插槽加載狀態(tài) -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

第二個備受期待的功能是 Reactivity Transform，這是對 Composition API 的一系列改進。Reactive API 中的所有方法（包括 ref 和 computed）都將獲得以 $ 開頭的版本。這些將是允許更輕松地訪問數據的宏，但需要額外的編譯步驟。

// Vue 3.3 之前
<script setup>
import { ref } from 'vue'

let count = ref(0)

console.log(count.value)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

// Vue 3.3
<script setup>
let count = $ref(0)

console.log(count)

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

在 Vue Amsterdam 上，尤雨溪分享了團隊的長期計劃。目前，這些計劃還處于起步階段，仍有可能發(fā)生變化。Vue 3.3 完成后，團隊正在考慮采用與 SolidJS 類似的新編譯策略。SolidJS 是一個類似于 React 的框架，但由于放棄了虛擬 DOM，它擁有更好的性能。可選地從 Vue 中刪除虛擬 DOM 可以顯著縮小包大小，并節(jié)省存儲虛擬組件結構所需的內存。

4、服務端渲染（SSR）

過去的一年，幾乎每個主要框架都有關于服務端渲染的較大更新，或者有一個具有大量新功能的全新庫（Vue – Nuxt 3、Svelte – SvelteKit、React – React Server Components、Remix、Next.js 13）。市場上也有很多創(chuàng)新的解決方案，與現有的框架無關。這里不得不提的就是 Qwik，它試圖徹底改變水合方法，還有 Astro，它推廣了創(chuàng)新的 Dynamic Islands 架構。

React 服務端組件和 Next.js 13

自 Dan Abramov 介紹 React 服務端組件以來已經兩年多了。簡而言之，React 將允許在服務端渲染單個組件并將 HTML 代碼發(fā)送到客戶端。這種方法非常類似于PHP，因為可以直接從 React 組件進行數據庫查詢。

// Note.js - Server Component
import db from 'db'; 

async function Note(props) {
  const note = await db.posts.get(props.id);
  
  return (
    <div>
      <h2>{note.title}</h2>
      <section>{note.body}</section>
    </div>
  );
}

然而，React 服務端組件也有其局限性。這種類型的組件不能存儲狀態(tài)（禁止使用 useState），不能被客戶端渲染的組件導入，并且需要像 Next.js 或 Gatsby 這樣的元框架才能工作。

盡管 React 服務端組件仍處于 alpha 階段，但使用它們的框架（Next.js、Gatsby）已經發(fā)布。特別是，Next.js 13 引起了社區(qū)的共鳴，因為它的新架構完全基于 React Server Components。這種架構的一個有趣的副作用是，只要不顯式定義客戶端組件，整個應用將只在服務端渲染。

Qwik

Qwik 通過破壞水合過程的合法性，顛覆了所有現代服務端渲染工具的范式。水合是一個客戶端過程，在此期間服務端渲染的應用加載 JavaScript 代碼，然后重復所有初始化邏輯。只有在水合過程完成后，應用才會響應。由于這種策略，用戶可以立即看到目標內容，過一會兒就可以與之交互。

Qwik 提供的替代方案是重新執(zhí)行。使用下面這種方式保存服務端的應用狀態(tài)，以使客戶端可以立即恢復代碼執(zhí)行。聽起來很復雜？幸運的是，復雜的邏輯被隱藏在了可訪問的 API 中：

那為什么未來 Qwik 是值得關注的呢？其有一個真正的全明星團隊負責其開發(fā)——Mi?ko Hevery（anguar.js 的創(chuàng)建者）、Manu Almeida（Gin 和 Stencil 的創(chuàng)建者）和 Adam Bradley（Ionic 和 Stencil 的創(chuàng)建者）。如果有人想徹底改變前端，那就是一群這樣的老手。

Astro

Astro 是一個推廣所謂 island 架構的框架。它假設在我們創(chuàng)建的頁面上，在靜態(tài)內容的海洋（例如導航菜單、文章）中，有交互式組件的小島（例如表單）。這種方法允許我們在服務端渲染整個應用，并且只將一小部分組件島代碼發(fā)送到客戶端。

Astro 配備了一個非常先進的機制來定義何時應該下載動態(tài)組件的代碼以及何時應該將它們混合。在可用的選項中，只有當組件在屏幕上可見時才需要下載，或者只有當滿足適當的媒體查詢時才需要水合。

Astro 在競爭中脫穎而出還因為它獨立于框架。這是很長一段時間以來第一個真正不支持任何解決方案的庫，最重要的是其可以與它們相互混合。

—
import HomeLayout from '../layouts/HomeLayout.astro'
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';

const data = await fetch('API_URL').then(r r.json());
---
<HomeLayout>
  <MyReactComponent client:load name={data.name}>
    <MySvelteComponent avatar={data.avatar}/>
  </MyReactComponent>
</HomeLayout>

5、Node.js、Deno、Bun

一年前，JavaScript 運行時的情況似乎比較穩(wěn)定。Node 憑借強大的實力占據主導地位，而 Deno 正在精心擴大其市場。然而，在 2022 年年中，當 Bun 以 700 萬美元的資金進入游戲時，發(fā)生了一場真正的地震。

Bun

Bun 是 Node.js 和 Deno 的替代品。Deno 將其營銷重點放在解決 Node.js 問題上，而 Bun 則強調性能。根據 Bun 作者發(fā)布的基準測試，其優(yōu)勢非常顯著。

Bun 的表現主要由兩個因素導致。首先，與其競爭對手不同，它不是用 C++ 編寫的，而是用 Zig 語言編寫的，Zig 是 C++ 和 Rust 的一個相當小眾的替代品。

影響 Bun 性能的第二個因素是使用了 Apple 的 JavaScriptCore 引擎。事實證明，JavaScriptCore 比 V8 更快。差異相對較小，但絕對存在。

Bun 還對 Node.js 進行了很多改進。與Deno一樣，TypeScript 是一種原生支持的語言。Bun 也是 npm 的替代品，其速度快 100 倍。Bun 提供了用于創(chuàng)建宏的 API（在編譯過程中生成的代碼，并訪問AST樹和鍵入元數據）。為了打包應用，Bun 使用它自己的打包工具/轉換器，這是非常快的。

Deno

在 Bun 的 alpha 版本發(fā)布幾周后，Deno 背后的團隊宣布了 npm 兼容性和具有許多性能改進的新 http 服務器。

支持 npm 是一個特別有爭議的決定，因為 Deno 作者聲稱這是其生態(tài)系統(tǒng)許多問題的根源。需要注意的是，npm 與 Deno 結合使用的工作方式與Node.js結合使用的情況。首先，Deno 不需要運行 npm install。其次，Deno 不會創(chuàng)建 node_modules 目錄，下載的包會全局存儲。第三，npm 導入將標有特殊的 npm: prefix：

import { chalk } from "npm:chalk@5";

Node.js

Node.js 的發(fā)展速度不如 Bun 或 Deno。但我們更看重的是它的穩(wěn)定性和可預測性，而不是改變世界的功能。盡管如此，Node.js 2022 年還提供了一些有趣的新功能。

一個有趣的新特性就是內置的 Test Runner，這意味著將不再需要 Jest 或 Vitest 等庫來測試 Node 應用：

test('synchronous passing test', (t) => {
  // 測試通過，因為它沒有拋出異常
  assert.strictEqual(1, 1);
});

test('asynchronous passing test', async (t) => {
  // 測試通過，因為異步返回了 Promise
  // 函數沒有被拒絕
  assert.strictEqual(1, 1);
});