TypeScript: typings example

Typings is a command line utility that helps you find type bindings for various libraries. Basically, it works a lot like NPM, but it only manages the mappings from library -> type. If you’ve used C/C++, this is like a Maven/NPM for .H (header) files.

Let’s take an example – first, we’ll install the utility:

npm install -g typings

Then we can search for stuff:

typings search react

Which apparently does a “contains” search:

NAME                              SOURCE HOMEPAGE                                           DESCRIPTION UPDATED                 
griddle-react                     npm    https://www.npmjs.com/package/griddle-react                    2016-04-13T18:36:51.000Z
mobservable-react                 dt     https://github.com/mweststrate/mobservable-react               2016-03-16T15:55:26.000Z
react                             dt     http://facebook.github.io/react/                               2016-04-23T06:59:14.000Z
react-addons-create-fragment      dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-css-transition-group dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-linked-state-mixin   dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-perf                 dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-pure-render-mixin    dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-shallow-compare      dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-test-utils           dt     http://facebook.github.io/react/                               2016-04-17T14:49:49.000Z
react-addons-transition-group     dt     http://facebook.github.io/react/                               2016-04-17T13:41:18.000Z
react-addons-update               dt     http://facebook.github.io/react/                               2016-03-16T15:55:26.000Z
react-addons-update               npm    https://www.npmjs.com/package/react-addons-update              2016-03-24T04:43:46.000Z
react-bootstrap                   dt     https://github.com/react-bootstrap/react-bootstrap             2016-04-23T13:55:14.000Z
react-bootstrap-table             dt     https://github.com/AllenFang/react-bootstrap-table             2016-02-04T15:58:49.000Z
react-cropper                     dt     https://github.com/roadmanfong/react-cropper                   2016-04-03T14:21:19.000Z
react-datagrid                    dt     https://github.com/zippyui/react-datagrid.git                  2016-03-16T15:55:26.000Z
react-day-picker                  dt     https://github.com/gpbl/react-day-picker                       2016-03-16T15:55:26.000Z
react-dnd                         dt     https://github.com/gaearon/react-dnd                           2016-03-16T15:55:26.000Z
react-dom                         dt     http://facebook.github.io/react/                               2016-04-12T15:40:40.000Z

You can do an exact search by name, if you know what you want:

typings search --name react

You can then install this by running this command (note “dt” is the source, it’s optional if the source is npm, and for bash you need the apostrophes)

typings install 'dt!react' --ambient --save

Once this works, it makes a file called “typings.json”:

{
  "dependencies": {
    "react": "registry:dt/react#0.14.0+20160423065914"
  }
}

If you get a project from another developer, you may need to run this:

typings install

This is also a good way to fix your local libraries if you end up with duplicates or things you don’t want (first, delete the “typings folder).

To import Typings files, you can add a reference comment at the top of your ts/tsx file:

/// 

Or include it as a line in tsconfig.json:

{
    "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "dist"
    },
    "exclude": [
      "node_modules",
      "dist",
      "node_modules",
      "typings"
    ],
    "files": [
      "./app/index.tsx",
      "./typings/main.d.ts"
    ]
}

The “ambient” flag above is used to tell Typescript that the library you’re importing is some external one (“ambient” meaning part of the external environment).