🌟 5 个顶级开发者（前 1%）超爱的 TypeScript 代码库 🔥

我们如何识别出顶尖的1%开发者？🔎

🧩 amilajack/eslint-plugin-compat

🔦 g-plane/typed-query-selector

🔗 jeffijoe/typesync

👯‍♀️ scinos/yarn-deduplicate

⭕️ discord/focus-rings

你好👋

在本周的分析中，我们找到了5 个深受顶尖 1% 开发者喜爱的 TypeScript 代码库。

准备好去看看了吗？

我们如何识别出顶尖的1%开发者？🔎

在 Quira，我们根据开发者的DevRank对其进行排名。

简单来说，DevRank 使用Google 的 PageRank 算法来衡量开发者在开源领域的重要性，其依据是开发者对开源代码库的贡献。

在找到排名前 1% 的开发者点赞过的代码仓库后，我们计算这些顶级开发者点赞代码仓库的概率，并与排名后 50% 的开发者不点赞代码仓库的概率进行比较。📊👇

注：我们意识到我们的排名方法尚不完善，因此我们会不断改进模型。欢迎您提出任何反馈意见。🙏

当你想构建自己的项目时，以下代码库将特别有用。

如果你想创造产品、享受乐趣并从中赚钱，最新的Creator Quest挑战赛将邀请你使用 GenAI 构建开发者工具（目前奖金池为 2048 美元🤫）。要参与，请注册Quira。

现在我们已经了解了方法论，接下来让我们深入了解 5 个超棒的 TypeScript 代码库，它们能将你的工作提升到一个新的水平🚀

🧩 amilajack/eslint-plugin-compat

一款用于检查代码浏览器兼容性的工具

为什么你应该关注它？ Eslint-plugin-compat 可以确保你的代码与目标浏览器兼容。该工具会检查你的 JavaScript 代码，标记出在浏览器环境中可能无法正常工作的功能。它有助于避免浏览器特有的问题，并在不同的网站上提供一致的用户体验。

设置：npm install eslint-plugin-compat

使用示例：

# 1. Update ESLint Config in .eslintrc.json:

{
  "plugins": ["compat"],
  "extends": ["plugin:compat/recommended"],
  "env": {
    "browser": true
  }
  // ...
}

# 2. Configure Target Browsers in your package.json:

{
  // ...
  "browserslist": ["defaults"]
}

https://github.com/amilajack/eslint-plugin-compat

🔦 g-plane/typed-query-selector

querySelector打字更流畅querySelectorAll

为什么你应该关注它？ Typed-query-selector 通过使用 TypeScript 的模板字面量类型，改进了标准的 querySelector 和 querySelectorAll 函数，提供了更完善的类型信息。这意味着你可以获得更高的 DOM 元素选择精度，从而使你的 TypeScript 代码更安全、更易用；尤其是在类型安全模式下处理复杂的选择器或直接操作 DOM 元素时。

设置：npm i -D typed-query-selector

使用示例：

import 'typed-query-selector'

document.querySelector('div#app') // ==> HTMLDivElement

document.querySelector('div#app > form#login') // ==> HTMLFormElement

document.querySelectorAll('span.badge') // ==> NodeListOf<HTMLSpanElement>

anElement.querySelector('button#submit') // ==> HTMLButtonElement

https://github.com/g-plane/typed-query-selector

🔗 jeffijoe/typesync

安装依赖项中缺失的 TypeScript 类型定义。

为什么你应该关注它？ TypeSync 会自动为项目中的所有依赖项安装 TypeScript 类型定义。该工具会扫描你的 package.json 文件，并自动添加相应的@types/package，省去了你手动添加的麻烦。它确实能节省时间，并确保你的项目类型检查正确且与依赖项兼容。

设置：npm install -g typesync

使用示例：

typesync [path/to/package.json] [--dry]

# Path is relative to the current working directory. If omitted, defaults to package.json.
# If --dry is specified, will not actually write to the file, it only prints added/removed typings.

https://github.com/jeffijoe/typesync

👯‍♀️ scinos/yarn-deduplicate

对 yarn.lock 文件进行去重

为什么要关注它？它有助于清理项目依赖项。通过从yarn.lock 文件中移除重复的包，它可以减轻项目重量，并可能提高项目速度。如果您使用的是 Yarn v1，此工具非常有用，因为它不像 Yarn v2 那样支持原生包去重。

设置：npm install -g yarn-deduplicate或yarn global add yarn-deduplicate

示例用例：
只需运行

yarn-deduplicate yarn.lock

https://github.com/scinos/yarn-deduplicate

⭕️ discord/focus-rings

帮助您在网页上的任何位置显示焦点指示器。

GIF

为什么你应该关注焦点指示器？焦点指示器是一种视觉提示，用于突出显示网页上当前选中的元素。React-focus-rings 是一款用于在 Web 应用程序中创建一致且美观的视觉焦点指示器的工具。它使焦点环的使用变得简单，从而确保您的网站高效且易于访问，所有用户（包括使用键盘导航的用户）都能轻松访问。

设置：npm i react-focus-rings

使用示例：

import * as React from "react";
import ReactDOM from "react-dom";

import { FocusRing, FocusRingScope } from "react-focus-rings";
import "react-focus-rings/src/styles.css";

function App() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  return (
    <div className="app-container" ref={containerRef}>
      <FocusRingScope containerRef={containerRef}>
        <div className="content">
          <p>Here's a paragraph with some text.</p>
          <FocusRing offset={-2}>
            <button onClick={console.log}>Click Me</button>
          </FocusRing>
          <p>Here's another paragraph with more text.</p>
        </div>
      </FocusRingScope>
    </div>
  );
}

ReactDOM.render(<App />, document.body);

https://github.com/discord/focus-rings

希望这些发现对您有所帮助，并能帮助您构建更强大的 TypeScript 工具包！⚒️

如果你想利用这些工具来构建酷炫的项目并赢取奖励，请登录Quira并探索任务！💰

是时候开始编程、享受乐趣并赢取丰厚奖励了！🤘

PS：请考虑给这些项目点赞支持。⭐️我们与这些项目没有任何关联。我们只是认为优秀的项目值得更多关注。

下周见！

你的 Dev.to 好友💚

巴普

如果你想加入自诩为开源领域“最酷”的服务器😝，那就加入我们的Discord 服务器吧。我们在这里帮助你开启开源之旅。🫶

奎拉 跟随

将开源变成一场双赢的游戏🎮