---
url: https://sugarat.top/weekly/2023-10-29.md
description: >-
  ① Yarn 4.0 正式发布，性能大幅提升！ ② JSDoc 真能取代 TypeScript？ ③ 页面Loading加载动画合集 ④ Spacedive
  - 开源的跨平台资源管理器 ⑤ 2024 React 生态系统展望 ⑥ TypeScript 5.3 beta ⑦ 一些特殊 HTTP 标头字段
---

# 视野修炼第59期

*笔者在GitHub开了个 discussion [🔥 技术&开源&文章推荐](https://github.com/ATQQ/sugar-blog/discussions/123)，欢迎读者推荐贡献内容或者知识渠道*

欢迎来到第 59 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. Yarn 4.0 正式发布，性能大幅提升！](https://mp.weixin.qq.com/s/rVbjLXJ9MubsguTWP-blvg)

> 10.23 日，Yarn 4.x 发布。

[新的官网](https://yarnpkg.com/)如下 *看上去档次高了*

![](https://img.cdn.sugarat.top/mdImg/MTY5ODU4NDQ0MzcwNQ==698584443705)

安装的话，官方推荐使用 corepack 安装（*才知道这个是 Yarn 与 Node.js 合作开发的*）

Corepack 是随 Node.js 16+ 一起提供的工具，它会根据你正在处理的项目自动选择正确的包管理器版本（管理包管理工具的工具🤭）

**大部分场景能和pnpm打个平手了**（不过感觉推出有点迟了，pnpm已经推得很广了）

### [2. JSDoc 真能取代 TypeScript？](https://juejin.cn/post/7292437487011856394)

先说结果：*JSDoc 确实可以替代 ts，但是其只是另一种使用 ts 的方式*

印象中社区里最开始 抛出放弃的TS的是 Svelte

但类型的问题始终需要解决，JSDoc 只是方便了 JS 文件可以使用TS的检查能力

转个知乎的讨论图，可以看一下使用 JSDoc 的代码

![](https://img.cdn.sugarat.top/mdImg/MTY5ODU4NjA5NTAyNA==698586095024)

书写起来并没有TS方便

### [3. 页面Loading加载动画合集](https://css-loaders.com/dots/)

该网站收集各种 CSS 的页面加载特效，**收藏起来备用！**

![](https://img.cdn.sugarat.top/mdImg/MTY5ODU4Njc5OTM5Ng==698586799396)

## 🔧开源工具&技术资讯

### [4. Spacedive](https://github.com/spacedriveapp/spacedrive) - 开源的跨平台资源管理器

**基于 Rust 和 Tauri 实现**

![](https://img.cdn.sugarat.top/mdImg/MTY5ODU4Nzg1NzUwNA==698587857504)

喜欢尝鲜的可以试一试，UI 还不错 *还没深度使用*

### [5. 2024 React 生态系统展望](https://dev.to/avinashvagh/react-ecosystem-in-2024-418k)

> 文章对 2024 年 的 React 生态系统进行展望，包括状态管理、表单处理、测试、样式和组件库等。

* 路由：React Router，React Query，Next.js
* 状态管理：Redux Toolkit，Zustand
* 表单：Formik，React Hook Form
* 测试：Vitest...

*emmm，和当下国内的企业生产开发所用的还是有很大差别*

### [6. TypeScript 5.3 beta](https://juejin.cn/post/7286750827895996431?searchId=202310292206173560BB3DCAE3BC82A2BC)

*beta 版本与正式版本通常不会有明显的差异*

> 主要的内容包括支持了两个 TC39 提案以及数个类型收窄相关的优化。

① Import Attributes

```ts
import json from "./foo.json" with { type: "json" };

import("foo.json", { with: { type: "json" } });

export { val } from './foo.js' with { type: "javascript" };
```

② 类型收窄优化

```ts
switch (true) {
  case typeof x === 'string':
    // 'x' is 'unknown' here.
    console.log(x.toUpperCase())
  case Array.isArray(x):
    // 'x' is 'unknown' here.
    console.log(x.length)
  default:
    // 'x' is 'unknown' here.
}
```

现在这种 `switch` 语句中的 `case` 分支种的`x` 将会正常工作，拥有正确的类型。

### [7. 一些特殊 HTTP 标头字段](https://book.hacktricks.xyz/network-services-pentesting/pentesting-web/special-http-headers)

文档中介绍一些不常见的 HTTP 标头字段，分使用场景进行了整理

![](https://img.cdn.sugarat.top/mdImg/MTY5ODU4NzMxNzA5NQ==698587317095)

可以收藏收藏，了解一下

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTY5ODU4NDE5MTM3Mg==698584191372)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://www.yuque.com/chencheng/mdh-weekly) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！