This Week's Repo Gems: 5 TypeScript Repos You Need to Check Out

Hi there 👋

For this week's analysis, we found 5 TypeScript repos adored by the top 1% of developers.

Ready to check them out?

How do we identify the "top 1%" of devs? 🔎

Have you ever heard of DevRank?

In simple terms, DevRank uses Google’s PageRank algorithm to measure how important a developer is in open source based on their contributions to open source repos.

After finding the repos that the top 1% have starred, we calculate the likelihood that these top devs will star a repo compared to the likelihood that the bottom 50% won’t. 📊👇

Note: I recognize that this ranking method is not yet perfect, so we keep improving our model. We welcome any feedback on this. 🙏

The below repos will be particularly useful when you want to build your own projects.

If you want to build small apps, check out Creator Quests, an open-source challenge rewarding devs for creating cool apps with ChatGPT, Claude, Gemini and more. 🙃 💰

The latest Creator Quest challenges you to build developer tools using GenAI.

The current prize pool is $2048, and it will increase as more participants join. To participate, you can check out Quests on Quine.sh.

Now that we've explored the methodology let's dive into five fantastic TypeScript repositories that can take your work to the next level 🚀

🧩 amilajack/eslint-plugin-compat

A tool to check your code's browser compatibility

Why should you care? Eslint-plugin-compat ensures that your code is compatible with your target browsers. This tool examines your JavaScript code to flag features that may not work in the browser environment. It is useful for avoiding browser-specific issues and providing a consistent user experience across different websites.

Set up: npm install eslint-plugin-compat

Example Use Case:

# 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

🔗 jeffijoe/typesync

Installs your dependencies' missing TypeScript typings

Why should you care? TypeSync automatically installs TypeScript type definitions for all dependencies in the project. The tool scans your package.json file and automatically adds the appropriate @types/package, saving you the trouble of adding them manually. It really saves time and ensures that your project's type-checking is correct and compatible with your dependencies.

Set up: npm install -g typesync

Example use case:

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

Deduplicate your yarn.lock files

Why should you care? It helps clean up project dependencies. It makes your project lighter and potentially faster by removing duplicate packages from your yarn.lock file. This tool is handy if you're using Yarn v1, as it doesn't support native package deduplication like Yarn v2 does.

Set up: npm install -g yarn-deduplicate OR yarn global add yarn-deduplicate

Example use case: Simply run

yarn-deduplicate yarn.lock

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

⭕️ discord/focus-rings

Helping you display focus indicators anywhere on a webpage.

Why should you care? Focus indicators are visual cues that highlight which element on a webpage is currently selected. React-focus-rings is a tool for creating a consistent and good-looking visual focus in web applications. This makes it easy to use focus rings to ensure your website is efficient and accessible to all users, including keyboard navigation users.

Set up: npm i react-focus-rings

Example use case:

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

🔦 g-plane/typed-query-selector

Better typed querySelector and querySelectorAll

Why should you care? Typed-query-selector improves the standard querySelector and querySelectorAll functions by providing better typing using TypeScript's template literal types. This means you'll get much more precision for DOM elements, making your TypeScript code safer and easier to use; especially when dealing with complex selectors or actions directly with DOM elements in type-safe mode.

Set up: npm i -D typed-query-selector

Example use case:

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

I hope these discoveries are of value to you and will help you build a more robust Typescript toolkit! ⚒️

It's time to code, have fun, and bag some awesome rewards. 🤘

PS: Please consider supporting these projects by starring them. ⭐️ I am not affiliated with them. I just think that great projects deserve great recognition.

See you next week,

Your Hackernoon buddy 💚

Bap

Also published here.