2023/09/10

这是这个专栏的第一期，创建这个专栏的目的如其名，在周末抽点时间消化下上周收藏和想要学习精进的内容。不过笔记内容可能会不够深入，重在补充知识广度。当然深入点可能就偏向于写篇博客来补充了

Typescript 5.3

不知不觉已经迭代到 5.3 了，这个版本的 First Look 可以参考 https://www.totaltypescript.com/typescript-5-3

我比较好奇的是下面这个语法：

const id = user.id || throw new Error("userId is required");

不过现在只在 Stage 2 阶段，还远着

还有一个字符串的宽松自动补全

type IconSize = "small" | "medium" | "large" | (string & {});
const icons: IconSize[] = [
  "small",
  "medium",
  "large",
  "extra-large",
  "anything-goes",
];

5.3 可能会实现一个使这个 hack 不必要的新特性，可以使用 string 作为类型并获得相同的自动补全:

type IconSize = "small" | "medium" | "large" | string;

ECMAScript 新提案

异步上下文 AsyncContext.Variable 和 AsyncContext.Snapshot，详情参考 https://github.com/tc39/proposal-async-context 和 https://blog.logrocket.com/understanding-async-context-future-server-side-javascript/

按照提案描述的场景，其实也很好理解：

function program() {
  const value = { key: 123 };
  try {
    shared = value;
    implicit();
  } finally {
    shared = undefined;
  }
}
let shared;
async function implicit() {
  assert.equal(shared.key, 123);
  await 1;
  // 在await异步任务执行完时，其实shared变量已经被赋值undefined
  assert.throws(() => {
    assert.equal(shared.key, 123);
  });
}
program();

解决方案的思路其实在于保存一个独立的上下文，确保同个上下文中的变量唯一，如下代码：

const shared = new AsyncContext.Variable();
shared.run("top", () => {
  console.log(shared.get()); // 'top'
  // 支持嵌套，在内部函数执行期间采用新值，执行完成后恢复为外层函数的值
  // shared.run("top2", () => {})
});

而 AsyncContext.Snapshot 用于捕获特定时间点所有 AsyncContext.Variable 实例的状态

const shared = new AsyncContext.Variable();
shared.run("top", () => {
  const snapshotDuringTop = new AsyncContext.Snapshot();
  shared.run("top2", () => {
    // const snapshotDuringTop2 = new AsyncContext.Snapshot();
    snapshotDuringTop.run(() => {
      console.log(shared.get()); // 'top'
    });
  });
});

TailwindCSS

这玩意出很久了，不过一直没机会在实际项目中用到，不是必需品，但听说用过的大部分都说香

使用之前都要考虑一个问题，就是原子化 CSS(Atomic/Utility-First CSS)和语义化 CSS(Semantic CSS) 的对比

语义化，比如写一堆类名去标识某类元素，可能还要遵循 BEM 的规则。比如下面类名就是一个简单的用户卡片的样式

.user-card {
  padding: 20px 16px;
  margin-top: 16px;
  line-height: 1.4;
  align-items: center;
}

原子化，将独立样式抽成原子（简写名），将这些原子进行积木式拼凑

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  ...
</div>

其实粗略看来，各有优劣，可以参考下卡颂大佬的文章 想明白这点，就知道 TailwindCSS 适不适合你