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).