🌟 5 secret TypeScript repos the top 1% of devs LOVE 🔥
Tags: typescript, javascript, webdev, programming
Published: 2024-01-12 11:25:07

Hi there 👋

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

Ready to check them out? 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dydkv17feuj2opejj1yg.gif)



---


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

At Quira, we rank developers based on their **[DevRank](https://docs.quira.sh/for-developers/devrank)**. 

In simple terms, DevRank uses [Google’s PageRank algorithm](https://en.wikipedia.org/wiki/PageRank) 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. 📊👇



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf6vtxtx9dtdeh13kvgn.png)



_Note: We recognise that our [ranking method](https://docs.quira.sh/for-developers/devrank) 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 stuff, have fun and make money from it, the latest _Creator Quest_ challenges you to build developer tools using GenAI (**the current prize pool is $2048🤫)**. To participate, sign up to [Quira](https://quira.sh/?utm_source=devto&utm_campaign=typescript_repos1). 


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akiuhk62zctvf3b9gilx.png)](https://quira.sh/?utm_source=devto&utm_campaign=typescript_repos1)


Now that we've explored our methodology let's dive into 5 fantastic TypeScript repositories that can take your work to the next level :rocket: 



---

# 🧩 amilajack/eslint-plugin-compat


**A tool to check your code's browser compatibility**



[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mga2x25advq58izvq2o.gif)](https://github.com/amilajack/eslint-plugin-compat)



**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](https://github.com/amilajack/eslint-plugin-compat)


---


# 🔦 g-plane/typed-query-selector

**Better typed `querySelector` and `querySelectorAll`**


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg266k949gz2oggcaypn.png)](https://github.com/g-plane/typed-query-selector)



**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**: 


```typescript

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](https://github.com/g-plane/typed-query-selector)



---


# 🔗 jeffijoe/typesync


**Installs your dependencies' missing TypeScript typings**



[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpiivuimebuuv1jv0tw1.gif)](https://github.com/jeffijoe/typesync)




**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](https://github.com/jeffijoe/typesync)



---

# 👯‍♀️ scinos/yarn-deduplicate


**Deduplicate your yarn.lock files**



[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0pgqpmokt9bt2bg00qy.png)](https://github.com/scinos/yarn-deduplicate)





**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 

```typescript

yarn-deduplicate yarn.lock

```


[https://github.com/scinos/yarn-deduplicate](https://github.com/scinos/yarn-deduplicate)



---


# ⭕️ discord/focus-rings


**Helping you display focus indicators anywhere on a webpage.**



[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxzmk3a3168apq7zq9x5.gif)](https://github.com/discord/focus-rings)



**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**: 


```typescript

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](https://github.com/discord/focus-rings)



---


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

If you want to leverage these tools to build cool projects and earn rewards, log into [Quira](https://quira.sh/?utm_source=devto&utm_campaign=typescript_repos1) and discover Quests! 💰


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exfce2dvwogd24ylsjhf.gif)


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


See you next week,

Your Dev.to buddy 💚

Bap

---

If you want to join the self-proclaimed "coolest" server in open source 😝, you should join our [discord server](https://discord.com/invite/ChAuP3SC5H/?utm_source=devto&utm_campaign=typescript_repos1). We are here to help you on your journey in open source. 🫶


{% embed [https://dev.to/quira](https://dev.to/quira) %}