栗子前端技术周刊第 36 期 (2024.6.24 – 2024.6.30)：浏览前端一周最新消息，学习国内外优秀文章视频，让我们保持对前端的好奇心。

技术资讯

1. TypeScript 5.5[1]：TypeScript 的此次发布版本是功能最重大的版本之一，功能包括：推断类型谓词，改善某些场景下的类型推断，特别是数组和过滤；JSDoc @import 标记，用于在 JavaScript 文件中导入类型的新标记，不会对运行时产生影响；改善编辑器体验与 watch 模式等等。

// 推断类型谓词
function makeBirdCalls(countries: string[]) {
  // birds: (Bird | undefined)[]
  const birds = countries
    .map(country => nationalBirds.get(country))
    .filter(bird => bird !== undefined); // 过滤 undefined

  for (const bird of birds) {
    // 以前版本：error: 'bird' is possibly 'undefined'。 5.5 不会报错，能正确推断类型。
    bird.sing(); 
  }
}

2. React-Admin v5[2]：React-Admin 是一个封装完善的中后台应用框架，v5 版本添加了许多新功能和完成许多功能的改善，包括目前默认有一个主题切换器和一个深色主题、Data providers 在组件卸载时可以撤销请求、useDefaultTitle() Hook 可以在任何地方返回应用标题等等。
3. 华为“仓颉”发布[3]：在上周华为开发者大会上，华为内部研发已久的国产自主编程语言仓颉终于正式对外官宣！仓颉语言作为面向未来的下一代编程语言，当前已经完成设计与实现并启动了开发者预览，未来将与 ArkTS 共同发展，为鸿蒙原生应用开发者提供极致高效的开发体验。熟悉 TS 的同学应该能很快上手 ArkTS，此次的仓颉，有兴趣的同学可以去更深入了解下。

技术文章

1. A Look at JavaScript's New Set Methods[4]：了解 JavaScript Set 的新方法 – 新方法让你更容易地处理集合相关的功能，列如查找集合间的交集、并集和差集。在 Node 22+、Chrome/Edge 122+、Firefox 127+、Safari 17+ 中可用，目前已被视为“基线”功能。

// 查找交集
const intersectionSet = set1.intersection(set2);

2. Understanding React Compiler[5]: 了解 React 编译器 – React 团队新推出的实验性工具，可通过重写代码自动优化性能，但是否应该使用它，以及它的引擎是如何工作的？本文作者将带你一探究竟。
3. 深入理解前端缓存[6]：本文将带你深入理解缓存机制以及缓存时间的判断公式，让你知道如何合理的使用缓存机制来更好地进行性能优化。作者将前端缓存分成 HTTP 缓存和浏览器缓存两个部分来和大家一起交流。

开发工具

1. simpleParallax[7]：一个可为页面上的任何图片添加视差样式动画的简单库，支持以原生 JS 或 React 组件方式使用。

import SimpleParallax from "simple-parallax-js";

const Component = () => (
  <SimpleParallax>
    <img src="image.jpg" alt="image" />
  </SimpleParallax>
)

2. PixelMatch 6.0[8]：高效的像素级图像比较库 – 给它两张图像，它就能突出显示差异。

3. Matter.js 0.20[9]：Matter.js 是一款适用于 web 的 JavaScript 2D 刚体物理引擎。

matter-js

以上资讯文章选自常见周刊，如 JavaScript Weekly 等，周刊内容也会不断优化改善，希望你们能够喜爱。

欢迎关注微信公众号：栗子前端

参考资料

[1] TypeScript 5.5: https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/

[2] React-Admin v5: https://marmelab.com/blog/2024/06/20/react-admin-v5.html

[3] 华为“仓颉”发布:
https://developer.huawei.com/consumer/cn/doc/openharmony-cangjie/cj-wp-abstract

[4] A Look at JavaScript's New Set Methods: https://developer.mozilla.org/en-US/blog/javascript-set-methods/

[5] Understanding React Compiler: https://tonyalicea.dev/blog/understanding-react-compiler/

[6] 深入理解前端缓存:
https://juejin.cn/post/7382891974942179354

[7] simpleParallax: https://simpleparallax.com/

[8] PixelMatch 6.0: https://github.com/mapbox/pixelmatch

[9] Matter.js 0.20: https://github.com/liabru/matter-js