大家好，我是 CUGGZ。祝大家新年快乐呀~
本文将回顾并总结 2022 年 JavaScript 生态系统中最重要的发展以及 2023 年的发展趋势！
大纲：
TypeScript
React
Vue
服务端渲染（SSR）
Node.js、Deno、Bun
1、TypeScript
回顾 2022 年，事实证明，即使在这样一个成熟稳定的生态系统中，也会发生一些有趣的事情。
类型会出现在 JavaScript 中吗？
3 月初，TypeScript 背后的公司微软准备了一份 JavaScript 标准提案。它的内容侧重于使用类似于 TypeScript 中已知类型的类型来丰富语法。为了保持向后兼容性并且不改变语言的基础，微软建议解释器将类型视为与注释相同（完全忽略它们）。这会将类型排除在应用逻辑之外，但会通过将语言服务器和类型检查器连接到 IDE 来提高代码的可读性和开发效率。
上面显示的行为可能与当前的 JSDoc 行为相似。但是，新提案比该解决方案具有显着优势。首先，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 { /* ... */ }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
那JavaScript 中的类型是否意味着 TypeScript 的终结呢？在早期阶段，JavaScript 中的类型可能比 JavaScript 中已知的类型更原始。TypeScript 还提供基于代码转换的功能，例如枚举。在这方面，JavaScript 不太可能很快赶上 TypeScript。
从 2022 年 3 月开始，该提案的工作进展不大，一直停留在 Stage 1（整个过程分为 4 个阶段）。但是，天正在由微软处理，所以该提案应该会在 2023 年回归。
TypeScript 的新功能
在过去的一年里，TypeScript 发布了 3 个新的版本：4.7、4.8、4.9。TypeScript 团队的开发人员花费了大量时间来优化性能并更好地处理更多边缘情况。在这些新特性中，有一个新功能令人眼前一亮：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 ();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
我们可能想到的就是定义颜色的类型并使用 Record 类型。在这种情况下，就被迫执行危险的转换操作：
复制
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 ();
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
此问题的解决方法就是使用新的 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 ;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
TypeScript 的未来
2023 年 3 月初将发布 TypeScript 5.0。值得注意的是，TypeScript 并不遵循语义版本控制。这意味着新的主要版本应该带来一系列激动人心的变化，但不一定是重大变化。
查看 TypeScript 存储库，可以瞥见一些即将推出的功能。首先，TypeScript 被重写为模块（之前是基于命名空间），减少了 25% 的包大小，提高了 10% 的编译速度。TypeScript 还致力于为任何文件类型提供原生 import 支持。种种迹象都表明，2023 年对于 TypeScript 来说，肯定会是比 2022 年更有趣的一年。
2、React
在 React 17 发行两年后，Meta 终于发布了下一个主要版本：18.0。与以前的版本不同，从API 的角度来看，上一版本没有引入显著的新颖之处，而这一版本充满了令人兴奋的功能。
React 18 和并发模式
这里说的并发是关于对渲染进行排队、排定优先级以及添加中止正在进行的渲染的能力的。
可以从并发模式中获益的典型示例就是与搜索字段进行交互。当用户按下键盘上的一个键时，即使是更新文本字段的最轻微延迟也会让用户感觉到有问题。当涉及到搜索结果时，稍微延迟甚至是比较自然的。在这种情况下，显然有优先级和非优先级渲染器需要处理。此外，如果用户能够比 React 渲染组件输入的更快，那么渲染中间搜索状态是不可取的。在这种情况下，渲染取消就可以发挥作用，只要出现更新版本的组件，就会取消之前的渲染。
那使用防抖函数是不是也可以达到类似的效果呢？React 18 之前的技术与并发模式之间的区别在于，之前，渲染是同步完成的，用户无法在渲染期间与页面进行交互。在并发模式下，当队列中出现优先级较高的渲染时，优先级较低的渲染将被中断。通过中止优先级较低的渲染，页面应该会响应更快。
使用此功能，可以以低优先级在屏幕外呈现组件（以便可以缓存已访问的页面，或者提前渲染用户最有可能访问的页面）。由于使用了优先级，这些操作不会影响界面的响应性，因为它们只会以较低的优先级执行。
下面来看一个实际的例子，低优先级更新必须包装在 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 ( <> {/*点击按钮后，直到低优先级渲染完成，div才会改变不透明度*/ } < div style = {{ opacity : isPending ? 0.8 : 1 }}> {/*只有在所有高优先级渲染完成后，下面的组件才会更新。*/ }
{/*若用户连续点击增加按钮，则只有最后一次渲染对用户可见。*/ }
{advancedCounter } < button onClick = {handleClick }>+ 1 </ button > </ div > </> );
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
useDeferredValue Hook 也已添加到 API 中。如果在高优先级渲染中调用此 Hook，它将返回前一个渲染的值。这样引用就不会改变，这将使渲染更快，因为不会重新渲染虚拟 DOM 树的一部分。完成高优先级渲染后，将安排低优先级渲染，其中 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 > {/*只有在所有高优先级渲染完成后，下面的组件才会更新。*/ }
{/*若用户连续点击增加按钮，则只有最后一次渲染对用户可见。*/ }
{advancedCounter } < button onClick = {handleClick }> Increase counter </ button > </ div > </> );
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
React 的未来
我们不太可能在 2023 年看到 React 新的主要版本。可以预见，有些功能不会等到 React 19，而是会进入 React 18 的下一版本。
React 团队目前正在开发的最大和最受期待的功能可能是 React 服务端组件。这并不是目前正在开发的唯一功能。React 团队正在开发一个 <Offscreen /> 组件，它将允许在不将元素附加到 DOM 的情况下渲染屏幕。另一个正在开发的功能是一个编译器，它可以在需要的地方自动添加 useMemo 和 useCallback。
3、Vue
2022 年，Vue 只发布了一个主要版本。令人惊讶的是，它不是另一个 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 }` );
},
};
Special Reminder & Disclaimer:
admin
Scan WeChat to give rewards
Scan Alipay and reward
