十五周刊 - 124

2024 第 47 周周报

欢迎来到十五周刊，我们每周都会分享有价值的前端技术文章，让你随时掌握前端的最新动态。此外，我们还会介绍一些实用的软件工具，帮助你提升工作效率。同时，我们也会分享一些个人生活感悟，希望通过分享，能够给你的生活带来一些启示和思考。希望你会喜欢我们的内容。

Windsurf IDE 发布

Codeium 出品的 IDE，与 Cursor 一样是一款基于 VSCode 的 AI 编辑器，不过它更偏向于流式工作模式。根据对话一步一步推算如何修改项目，并且遇到问题时自动修正。在这一点上体验比 Cursor 更好。另外它的月费只需要 10美元，只有 Cursor 的一半。

但目前还不支持输入图片，另外现阶段 AI 对项目下多个文件的修改，让我没有安全感，所以我更习惯 Cursor 的辅助模式，尤其是 tabtab 预测下一个修改位置，非常爽。总体来说我更喜欢 Cursor，但是也会保持对 Windsurf 的关注，期待它尽快支持图片输入，支持修改位置的预测。

一个在线工具，提供常见前端框架的语法对比。

Tanstack Start 是 Tanstack 发布的基于 Tanstack Router、Vinix 以及 Vite 的全栈框架。支持 SSR、Server Functions。目前处于 beta 阶段。没想到在 Next.js 和 Remix 之后还会有这么一款全栈框架，真是太卷了。

Drizzle 是一个 ORM，可以用来操作数据库，它的目标是让开发者更轻松地操作数据库，而不必关心底层的实现细节。但与 Prisma 相比一直缺少 seed 功能，drizzle-seed 就是为了解决这个问题，它可以让开发者更轻松地初始化数据库。

Tip

除了 Socket.dev, npm package info 也可以用来查看包的各种信息。

这篇文章详细介绍了 TypeScript 中的 tsconfig.json 文件，包括其作用、推荐的最佳实践设置及各个设置的具体含义和用途。

这篇文章主要讨论了在 React 项目中传递 useState 的 setter 函数作为 props 的问题，以及如何解决这种可能导致抽象泄漏的情况。

An abstraction leak occurs when a component knows too much about the internal implementation of another component.

作者提到组件不应该了解其他组件的内部实现细节，例如将 setter 函数作为 props 传递给子组件，这样子组件就假定了父组件一定使用了 useState，且 state 的数据结构也被固定了，这样就造成了两个组件的高度耦合，子组件复用性降低，父组件的迭代也很容易影响子组件。

这篇文章介绍了使用 TypeScript 在应用开发场景下的 React 项目时一些常用的类型编写的最佳实践。