Now vibe coding, so learning hammer FE ?
《TypeScript 6.0 正式发布：迈向原生编译器的重要桥梁》
标签：#前端 #TypeScript #TS6 #TS7 #ESM #NodeJS #Compiler
总结：
TypeScript 6.0 是连接 5.9 与即将发布的 Go 语言重写版 7.0 的关键过渡版本，也是基于当前 JavaScript 代码库的最后一个主要版本。本次更新带来多项实用新特性，包括更智能的无
文章要点：
- 过渡版本定位**：TS 6.0 是基于 JS 代码库的最后一个版本，TS 7.0（Go 重写版）已接近完成，6.0 的改动主要为 7.0 铺路
- **类型推断更聪明**：不再把未使用 `this` 的方法语法函数视为上下文敏感函数，让属性顺序不影响类型推导，写代码更随心所欲
- **子路径导入更简洁**：终于支持 `#/*` 这种干净的别名写法，告别之前必须写 `#root/*` 的冗余，和打包工具里的 `@/` 习惯更接近了
- **全新内置类型**：Temporal API 正式入驻（处理日期时间更靠谱），Map 新增 `getOrInsert` 和 `getOrInsertComputed` 方法，告别繁琐的"有则取无则设"模式
- **配置默认值现代化**：`strict` 默认开启，`module` 默认 `esnext`，`target` 默认当前年份（es2025），新项目开箱即用更严格、更现代
- **性能优化相关**：`types` 默认改为空数组（需显式声明如 `["node"]`），`libReplacement` 默认关闭，构建速度有望提升 20-50%
- **大量废弃项需留意**：`target: es5`、`baseUrl`、`moduleResolution node`、AMD/UMD/SystemJS 模块、`outFile`、`module` 关键字声明命名空间等都将退出历史舞台，建议尽早迁移
- **迁移辅助工具**：提供 `--stableTypeOrdering` 标志帮助对比 6.0 与 7.0 的差异，`ts5to6` 工具可自动调整 `baseUrl` 和 `rootDir` 配置
**文章URL：
https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/
标签：#前端 #TypeScript #TS6 #TS7 #ESM #NodeJS #Compiler
总结：
TypeScript 6.0 是连接 5.9 与即将发布的 Go 语言重写版 7.0 的关键过渡版本，也是基于当前 JavaScript 代码库的最后一个主要版本。本次更新带来多项实用新特性，包括更智能的无
this 函数类型推断、支持 #/ 开头的子路径导入、内置 Temporal API 类型、Map 的 getOrInsert 方法等。同时，大量旧配置项被标记为废弃（如 target: es5`、`baseUrl`、AMD/UMD 模块等），`strict 和 module 等选项的默认值也更现代化。这些调整旨在帮助开发者提前适配 TypeScript 7.0 的全新架构。文章要点：
- 过渡版本定位**：TS 6.0 是基于 JS 代码库的最后一个版本，TS 7.0（Go 重写版）已接近完成，6.0 的改动主要为 7.0 铺路
- **类型推断更聪明**：不再把未使用 `this` 的方法语法函数视为上下文敏感函数，让属性顺序不影响类型推导，写代码更随心所欲
- **子路径导入更简洁**：终于支持 `#/*` 这种干净的别名写法，告别之前必须写 `#root/*` 的冗余，和打包工具里的 `@/` 习惯更接近了
- **全新内置类型**：Temporal API 正式入驻（处理日期时间更靠谱），Map 新增 `getOrInsert` 和 `getOrInsertComputed` 方法，告别繁琐的"有则取无则设"模式
- **配置默认值现代化**：`strict` 默认开启，`module` 默认 `esnext`，`target` 默认当前年份（es2025），新项目开箱即用更严格、更现代
- **性能优化相关**：`types` 默认改为空数组（需显式声明如 `["node"]`），`libReplacement` 默认关闭，构建速度有望提升 20-50%
- **大量废弃项需留意**：`target: es5`、`baseUrl`、`moduleResolution node`、AMD/UMD/SystemJS 模块、`outFile`、`module` 关键字声明命名空间等都将退出历史舞台，建议尽早迁移
- **迁移辅助工具**：提供 `--stableTypeOrdering` 标志帮助对比 6.0 与 7.0 的差异，`ts5to6` 工具可自动调整 `baseUrl` 和 `rootDir` 配置
**文章URL：
https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/
Microsoft News
Announcing TypeScript 6.0
TypeScript 6.0 is now available! TypeScript 6 is a stepping-stone release, aligning with the upcoming native-speed 7.0 release.
《人生苦短，何必手写 API 类型：OpenAPI 驱动的 React 开发》
标签：#前端 #React #OpenAPI #TypeScript #Hey_API #MSW #Nanoquery #Contract_First
总结
本文是 Evil Martians 团队"契约优先"系列第三篇，介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源，利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式，配合 Nanostores 与 Nanoquery 实现类型安全的状态管理，并使用 MSW 在浏览器层面拦截网络请求进行模拟，实现前后端并行开发。当后端契约变更时，重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方，避免生产环境出现类型不匹配错误。
文章要点：
- **手写 API 类型的痛点**：类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现
- **Hey API 自动生成**：通过
- **Nanostores + Nanoquery 状态管理**：将 API 数据视为全局状态存储在组件外，支持缓存、自动重取、跨组件共享，避免传统 Hooks 的数据获取陷阱
- **MSW 网络层模拟**：在浏览器层面拦截真实 HTTP 请求返回模拟数据，支持随机延迟、分页、过滤、错误场景，实现不依赖后端的功能开发
- **完整实战示例**：包含酒店管理系统代码，展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程
- **契约优先工作流**：后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码，确保集成一次成功
文章URL：https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react
标签：#前端 #React #OpenAPI #TypeScript #Hey_API #MSW #Nanoquery #Contract_First
总结
本文是 Evil Martians 团队"契约优先"系列第三篇，介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源，利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式，配合 Nanostores 与 Nanoquery 实现类型安全的状态管理，并使用 MSW 在浏览器层面拦截网络请求进行模拟，实现前后端并行开发。当后端契约变更时，重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方，避免生产环境出现类型不匹配错误。
文章要点：
- **手写 API 类型的痛点**：类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现
- **Hey API 自动生成**：通过
openapi-ts 从 OpenAPI Spec 生成 TypeScript 类型、SDK 函数、Zod 验证模式和客户端配置，实现编译时与运行时双重安全- **Nanostores + Nanoquery 状态管理**：将 API 数据视为全局状态存储在组件外，支持缓存、自动重取、跨组件共享，避免传统 Hooks 的数据获取陷阱
- **MSW 网络层模拟**：在浏览器层面拦截真实 HTTP 请求返回模拟数据，支持随机延迟、分页、过滤、错误场景，实现不依赖后端的功能开发
- **完整实战示例**：包含酒店管理系统代码，展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程
- **契约优先工作流**：后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码，确保集成一次成功
文章URL：https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react
evilmartians.com
Life's too short to hand-write API types: OpenAPI-driven React—Martian Chronicles, Evil Martians’ team blog
Transform your React development with contract-first APIs. Generate TypeScript types, build type-safe clients, and develop with mocks while backend implements—no more waiting, no more integration chaos.
TypeScript 泛型趣味实践
标签：#TypeScript #泛型 #函数重载 #TanStack #条件类型
文章深入探讨了如何利用 TypeScript 泛型、条件类型和函数重载，为 TanStack Start 的 Server Function 构建一个完全类型安全的查询选项封装函数。通过一个真实的场景——确保带参数和不带参数的 Server Function 都能被正确推断返回类型和参数类型——展示了从基础泛型约束到复杂类型体操的完整实现路径，最终解决了可选参数与类型推断的冲突问题。
文章要点：
- 通过为 TanStack Start 的 Server Function 封装
- 初始方案使用泛型约束
- 利用条件类型
- 通过 TypeScript 函数重载（Overloading）定义两个签名：一个用于带参数的 Server Function，一个用于无参函数，从而精确控制参数的可选性
- 展示了泛型、条件类型与函数重载结合使用的高级技巧，实现编译时严格的类型检查和完美的类型推断
链接：https://frontendmasters.com/blog/fun-with-typescript-generics/
标签：#TypeScript #泛型 #函数重载 #TanStack #条件类型
文章深入探讨了如何利用 TypeScript 泛型、条件类型和函数重载，为 TanStack Start 的 Server Function 构建一个完全类型安全的查询选项封装函数。通过一个真实的场景——确保带参数和不带参数的 Server Function 都能被正确推断返回类型和参数类型——展示了从基础泛型约束到复杂类型体操的完整实现路径，最终解决了可选参数与类型推断的冲突问题。
文章要点：
- 通过为 TanStack Start 的 Server Function 封装
refetchedQueryOptions 工具函数，解决查询数据返回类型为 any 的类型安全问题- 初始方案使用泛型约束
<T extends (arg: { data: any }) => Promise<any>> 提取参数和返回类型，但无法处理无参函数的可选参数场景- 利用条件类型
infer 关键字创建类型工具 ServerFnArgs 来提取函数参数类型，并判断函数是否有参数- 通过 TypeScript 函数重载（Overloading）定义两个签名：一个用于带参数的 Server Function，一个用于无参函数，从而精确控制参数的可选性
- 展示了泛型、条件类型与函数重载结合使用的高级技巧，实现编译时严格的类型检查和完美的类型推断
链接：https://frontendmasters.com/blog/fun-with-typescript-generics/
Frontend Masters
Fun with TypeScript Generics
Generics are an incredibly powerful feature of TypeScript. There’s endless content on TypeScript in general, and generics in particular. This post will differ a bit and cover things more deeply.
#React 学习如何使用 React Three Fiber 创建一个简化版的移动游戏《跳跳路》的克隆版。#ReactThreeFiber #Threejs #JavaScript #TypeScript
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
JavaScript Game Tutorials
Crossy Road with React Three Fiber
In this tutorial, we learn how to create a simplified clone of the mobile game Crossy Road with React Three Fiber.
