---
url: https://sugarat.top/weekly/2023-08-27.md
description: >-
  ① 🍉 CEC-IDE ② 天工AI搜索 ③ Million（一键为React项目提速70%） ④ Rollup 计划切换解析器从 acorn 到
  swc  ⑤ 为什么 TypeScript 不能正确处理 Object.keys() ⑥ background-removal-js - 自动抠图 JS
  SDK ⑦ GPT-3.5 Turbo 新增微调 API
---

# 视野修炼第51期

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

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. 🍉 CEC-IDE](https://github.com/microsoft/vscode/issues/191229)

本周技术圈的大瓜，对外宣传自研 IDE，实际上是 VS Code 的换皮

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEyODc1MDc4Ng==693128750786)

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEyOTAyNTM3OA==693129025378)

上线当天就被喷了，目前相关网站已停止访问，[致歉声明](https://www.oschina.net/news/255521)来了

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEyOTE5ODMzNA==693129198334)

大方承认一下基于开源的也没啥，非要说完全自研（这不妥妥打脸）

### [2. 天工AI搜索](https://search.tiangong.cn/)

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMzAwMjExMg==693133002112)

[国内第一款AI搜索](https://mp.weixin.qq.com/s/WSVpbXAtm0BbZ7mLj4MX1Q)

自动对搜索内容进行总结，全程无广，不过使用需要登录

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMjk1OTI2Ng==693132959266)

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

### [3. Million（一键为React项目提速70%）](https://million.dev/)。

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMzI2NDgzNw==693133264837)

> 使用 npm i million 让你的 React 项目「快达 70%」，支持 Next.js、RSC、Vite、Astro 等。

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMzMyODQxNA==693133328414)

### [4. Rollup 计划切换解析器从 acorn 到 swc](https://github.com/rollup/rollup/pull/5073)

> 方案是直接使用 swc 的 Rust 绑定，将 AST 转换为二进制格式，然后再作为（Array）Buffer 传递给 JavaScript这相比直接传 AST 的 JSON 格式会快很多。

*相信在未来，当下流行的构建工具或多或少都会内置一些基于 Rust 实现的工具，在部分环节上提速*

不过一般的项目，1分钟和30s差距不大，但是对于一些老项目（基于webpack的），多则20分钟，少则5-6分钟

在追求项目稳定的情况下，很难在底层工具链上做改造，目前基本还是拆子项目，或者换上高性能的构建机器

### [5. 为什么 TypeScript 不能正确处理 Object.keys()](https://alexharri.com/blog/typescript-structural-typing)

本文阐述了在 TypeScript 中使用 `Object.keys()` 遍历对象时的一个报错和优雅的解决办法

下面是一个示例，相信使用 TS 的同学都有遇到过这个问题

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMDAwNzY5OQ==693130007699)

笔者通常会将其设置为 `any` 来解决这个问题，但是这样会导致丢失类型信息

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMDIyMjQ0OA==693130222448)

报错的原因是因为，在TS的定义在`Object.keys` 方法的定义如下

```ts
interface Object {
  keys(o: object): string[];
}
```

其返回内容是 `string[]`，而咱们得对象属性是确定的，所以这里会报错

文章作者给了一个规避方法是将其`as (keyof typeof T)[]` 比 `any` 优雅一点

```ts
const keys = Object.keys(options) as (keyof typeof options)[];
keys.forEach(key => {
  if (options[key] == null) {
    throw new Error(`Missing option ${key}`);
  }
});
```

当然这里可以提取出一个工具类型和工具方法，方便使用

```ts
type KeysOf<T> = (keyof T)[]

const keysOf = <T extends object>(obj: T) => Object.keys(obj) as KeysOf<T>

keysOf({ a: 1, b: 2 }).forEach((key) => {
  if (key === 'a') {
    console.log(key)
  }
})
```

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMTA5NzgyMQ==693131097821)

### [6. background-removal-js](https://github.com/imgly/background-removal-js) - 自动抠图 JS SDK

直接通过浏览器实现自动抠图

笔者拿了一张AI生成的图，效果还是不错

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMTU4OTE1Mw==693131589153)

## 🤖AI工具&资讯

### [7. GPT-3.5 Turbo 新增微调 API](https://openai.com/blog/gpt-3-5-turbo-fine-tuning-and-api-updates)

> GPT-3.5Tubo的微调现已推出，GPT-4的微调将于今年秋天推出。此更新使开发人员能够自定义更适合其用例的模型。

一些特定场景可以通过微调来提升模型的准确率，

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTY5MzEzMzQ1MTc3MQ==693133451771)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<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 订阅源抓取最新前端技术文章