npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

all-types

v0.1.1

Published

All DefinitelyTyped typedefs, installed globally, for WebStorm & other JetBrains IDEs

Downloads

6

Readme

all-types

All DefinitelyTyped typedefs, installed globally, for WebStorm & other JetBrains IDEs

Motivation

I created this to be able to leverage DefinitelyTyped's type definitions from within JetBrains' WebStorm (and other IDEs). The presence of these typedefs provides better highlighting and code completion, even if you're not using TypeScript!

This tool will absolve you from actually adding @types/whatever as a development dependency to a non-TypeScript project.

Install

$ npm i -g all-types

Upon installation, three (3) things happen:

  1. The DefinitelyTyped repo will be cloned into a data directory.
  2. The working copy's types/ dir will then be symlinked to your global node_modules directory as @types.
  3. The update-types executable will be installed globally.

Post-Install Setup

Webstorm & other JetBrains IDEs

To get this working, you need to add a new "JavaScript library" to your IDE. These instructions will assume WebStorm.

  1. Load a Node.js or JavaScript project.

  2. Ensure the Node.js plugin is installed (it probably is).

  3. Open Preferences.

  4. Navigate to Languages & Frameworks > JavaScript > Libraries.
    screenshot

  5. Click Add:
    screenshot

  6. In the dialog, configure like so:
    screenshot

    1. Set Name to "types" or "all-types" (up to you).
    2. Set Framework type to node_modules.
    3. Set Visibility to Global.
  7. Click the + as shown below, then select Attach Directories....
    screenshot

  8. In the file chooser, navigate to your global modules dir.

    This is usually something like /usr/local/lib/node_modules or /usr/lib/node_modules. You can print this by executing npm config get prefix then appending lib/node_modules (or just node_modules if on Windows).

    From this directory, navigate into the newly-symlinked @types/ dir.

    Warning! You could add the whole @types/ dir, but I'd recommend just picking the ones you actually use. I've had unexpected results when trying to load the whole thing (plus, indexing is slow); YMMV.

    Now you should be in /path/to/global/node_modules/@types/. You can select multiple directories; go ahead and command-click (or alt-click or whatever) on the packages you use. For example, if you use lodash and debug often, pick both of these directories.

    You will probably want to get types for the Node.js core modules--but you may not want all of them. So, don't add @types/node; instead, add @types/node/v6 or @types/node/v4 depending on your version. As of this writing, v8 was not available, so I just chose v7.

    You don't have to choose them all now--you can go back and add more later! Pick a handful. When finished, click OK.

  9. Now, you will need to tell WebStorm the "scope" of this library. Click Manage Scopes...:
    screenshot

  10. Click on the first row, in the Library column. You should see something like <your-project>/nodemodules already checked. Find all-types, then select it.
    screenshot

    all-types will be whatever you named it, but all-types/nodemodules will be <your-project>/nodemodules; I just happened to take this screenshot from this project!

  11. Click OK. Then click OK again to apply & save your preferences.

  12. To verify this worked, take a look at the External libraries in your project tree. If it looks like this, you're set:
    screenshot

  13. Enjoy better type inference and code completion!

Since you've installed this library as a global library, repeat steps 9-12 for each other project which wants to use the globally-installed types.

I've yet to discover a way to get this working in WebStorm's Default Settings, so it is automatically enabled in a new project.

Updating the Types

The working copy tracks the master branch of DefinitelyTyped. The DefinitelyTyped team publishes All packages within the @types scope from master, as far as I can tell.

To get any updates, execute update-types again; it'll pull down all of the latest changes, without cloning again from scratch.

Consider creating a cron or launchd job to update automatically.

Advanced Installation & Usage

Default Working Copy Path

The default path of the DefinitelyTyped working copy is /your/xdg-data-dir/all-types/DefinitelyTyped/. You can discover this path via the --show-dir flag:

$ update-types --show-dir
/Users/boneskull/.local/share/all-types/DefinitelyTyped

See xdg-basedir for more information.

Custom Working Copy Path

To override the default path, you can specify the --dir option to update-types; the repo will then be cloned into the directory of your choosing. To be clear, it won't create a DefinitelyTyped/ subdirectory; the working copy root will be at the path you specify:

$ update-types --dir /tmp/foobar
Updating https://github.com/DefinitelyTyped/DefinitelyTyped.git at /tmp/foobar, please wait...
Up-to-date.

However, this will not remove the default working copy (as shown with update-types --show-dir)!

Set Working Copy Path Globally

You can set the ALL_TYPES_DIR environment variable. This will override the default path, but not any path specified with -d/--dir.

You can set this when installing, as well:

$ ALL_TYPES_DIR=/tmp/foobar npm i -g all-types

Caveats

  • This package is not intended to work with TypeScript projects. This tool is for non-TypeScript projects which want to take advantage of the extra type information available from DefinitelyTyped.
  • Be careful with typedefs corresponding to a version of a package you aren't using. If you need older versions, you may need to manually manage the working copy, or use npm install -D (which we were trying to avoid).

License

© 2017 Christopher Hiller. Licensed Apache-2.0.