Automating TypeScript @types Package Management with typesync

Have you ever found yourself tediously adding type definition packages to your TypeScript project? Wouldn't it be great if this process could be automated?

Today, I'm excited to introduce a package that solves this exact problem!

Introducing typesync

GitHub - jeffijoe/typesync

Install missing TypeScript typings for dependencies in your package.json.

typesync is a package that automatically adds missing type definition packages by analyzing your package.json file.

Installation

Let's get started by installing typesync:

$ yarn add -D typesync

# or if you're using npm
$ npm install -D typesync

Next, set it up to run during the preinstall phase:

{
    "scripts": {
        "preinstall": "typesync || :"
    }
}

The || : is added to ignore errors during the initial installation when typesync isn't available yet.

If you encounter issues, you can set it up as a postinstall script instead:

{
    "scripts": {
        "postinstall": "typesync"

        // To automatically install @types after adding:
        // "postinstall": "typesync && yarn install --ignore-scripts"
        // or for npm:
        // "postinstall": "typesync && npm install --ignore-scripts"
    }
}

Seeing it in Action

Let's test typesync on two popular projects: react-redux-realworld-example-app and vue-realworld-example-app.

For react-redux-realworld-example-app:

  "devDependencies": {
    ...
+    "@types/history": "^4.7.6",
+    "@types/marked": "^0.7.4",
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^5.0.21",
+    "@types/react-router": "^4.4.5",
+    "@types/react-router-dom": "^4.3.5",
+    "@types/react-router-redux": "^5.0.18",
+    "@types/redux-logger": "^3.0.7",
+    "@types/superagent": "^3.8.7",
  }

For vue-realworld-example-app:

  "devDependencies": {
    ...
+    "@types/babel-core": "6.25.6",
+    "@types/babel__core": "^7.1.7",
+    "@types/babel__preset-env": "^7.9.0",
+    "@types/marked": "^0.7.4",
+    "@types/node-sass": "^4.11.1",
  }

As you can see, typesync successfully added the missing @types packages. Note that Vue's type definitions are included in the main package, so they were correctly skipped.

Advanced Configuration

While typesync works great out of the box, you can customize its behavior by adding a .typesyncrc file:

{
    "ignorePackages": ["react", "nodemon"]
}

This allows you to specify packages that you don't want typesync to manage. For more detailed usage, check out the official documentation.

How It Works

typesync operates on a simple yet effective principle:

1. Fetch information about all @types packages
2. Compare with your package.json
3. Update package.json with appropriate @types packages

What makes typesync particularly impressive is that it:

• Adds the closest matching version in compliance with semver
• Skips packages that already include type definitions
• Removes @types packages for dependencies you no longer use

The @types package information is sourced from a JSON file used by the TypeScript Types Search.

Wrapping Up

typesync is a small tool that can save you a significant amount of time and mental overhead. By automating the management of type definition packages, it allows you to focus on what really matters - writing great TypeScript code.

Give typesync a try in your next TypeScript project and free yourself from the tedium of manual @types management!

How has your experience been with managing TypeScript type definitions? Have you used typesync or similar tools? Share your thoughts and experiences in the comments below!