MDH 前端周刊第 25 期：vscode.dev、Aura Theme 2、Node 17、useId - 《MDH 前端周刊》

❄️ TL;DR
⚡ 展开讲讲
🕒 订阅

这是「MDH：前端周刊」第 0025 期，发表于：2021/10/25。本期刊开源（GitHub: sorrycc/weekly），欢迎 issue 区投稿，推荐或自荐项目。

MDH 前端周刊第 25 期：vscode.dev、Aura Theme 2、Node 17、useId - 图1
封面图：仙居永安溪 @ 2021.10.23。

❄️ TL;DR

👉 vscode.dev
👉 MDX 2
👉 Aura Theme 2
👉 TypeScript 4.4 Cheat Sheet
👉 3 TypeScript Tricks
👉 useId
👉 beta.reactjs.org
👉 Node 17
👉 Webpack 包分析工具集
👉 Gatsby 4

⚡ 展开讲讲

vscode.dev

https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

跑在浏览器中的轻量级 VSCode，

🗂 支持本地文件查看和编辑
💻 支持 HTML、JavaScript 和 CSS 等
🐞 支持 Debug
🔋 在 Chromebooks & iPads 下消耗较少电量
☁️ 支持 GitHub

MDX 2

https://v2.mdxjs.com/blog/v2/

📝 语法兼容性更好
🧑‍💻 支持 JavaScript 表达式，比如转换 {2 * Math.PI} 为 6.283185307179586
🔌 新增 esbuild、Rollup、Node.js 的集成方式，比如 @mdx-js/esbuild 用于 esbuild
⚛️ 支持任意的 JSX runtime，包括 React, Preact, Vue, Emotion 等
🌳 改进 AST 提供更详细信息
🏃‍♀️ 编译速度至少快 25%

Aura Theme 2

https://dev.to/daltonmenezes/aura-theme-v2-0-0-is-out-now-565h

MDH 前端周刊第 25 期：vscode.dev、Aura Theme 2、Node 17、useId - 图2

全平台主题，支持 VSCode、iTerm、Google Chrome 等，唯一可惜的是不支持 WebStorm。

TypeScript 4.4 Cheat Sheet

https://www.sitepen.com/blog/typescript-cheat-sheet

TypeScript 4.4 备忘录，文中通过表格方式较清晰地展示了 TypeScript 的一些使用方式，如平时我们不常用的 &&= 等，值得看看。如果想看比较详细的介绍，可以看 TypeScript 权威指南（https://www.sitepen.com/blog/update-the-definitive-typescript-guide）这篇文章。

3 TypeScript Tricks

https://www.cstrnt.dev/blog/three-typescript-tricks

摘要，

Readonly<T> ，给不希望被修改的数组或对象加上 Readonly Tag，被修改则报错，减少「惊喜」的发生，比如 function sort(arr: Readonly<Array<number>>) {}，arr.sort() 时就会报错，可改用 [...arr].sort()
Any vs Unknown，建议用 any 前优先考虑用 unknown。Any 是直接躺平；Unknown 是你知道不确定有哪些类型的值，用之前必须先检查类型以确保类型安全，比如 if (typeof foo === 'function') foo()
优先用 Record 声明对象类型。有两种声明方式，interface Foo { [key: string]: unknown } 和 Record<string, unknown>，后者会更灵活些，比如需求变更后，key 只允许 foo 和 bar，可改成 Record<'foo'|'bar', unknown>，前者则不行

useId

https://github.com/reactwg/react-18/discussions/111

摘要，

useId 即完善后的 useOpaqueIdentifier，用于生成唯一 id，支持 SSR，支持 hydration
应用场景比如可访问性中 label 的 htmlFor，const id = useId(); <label htmlFor={id+'firstName'} />

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input type="checkbox" name="react" id={id} />
    </>
  );
);