{"id":3912,"date":"2016-04-30T01:27:36","date_gmt":"2016-04-30T01:27:36","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3912"},"modified":"2016-04-30T01:27:36","modified_gmt":"2016-04-30T01:27:36","slug":"typescript-typings-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/typescript-typings-example\/","title":{"rendered":"TypeScript: typings example"},"content":{"rendered":"

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. <\/p>\n

Let’s take an example – first, we’ll install the utility:<\/p>\n

\nnpm install -g typings\n<\/pre>\n
Then we can search for stuff:<\/p>\n
\ntypings search react\n<\/pre>\n
Which apparently does a “contains” search:<\/p>\n
\nNAME                              SOURCE HOMEPAGE                                           DESCRIPTION UPDATED                 \ngriddle-react                     npm    https:\/\/www.npmjs.com\/package\/griddle-react                    2016-04-13T18:36:51.000Z\nmobservable-react                 dt     https:\/\/github.com\/mweststrate\/mobservable-react               2016-03-16T15:55:26.000Z\nreact                             dt     http:\/\/facebook.github.io\/react\/                               2016-04-23T06:59:14.000Z\nreact-addons-create-fragment      dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-css-transition-group dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-linked-state-mixin   dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-perf                 dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-pure-render-mixin    dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-shallow-compare      dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-test-utils           dt     http:\/\/facebook.github.io\/react\/                               2016-04-17T14:49:49.000Z\nreact-addons-transition-group     dt     http:\/\/facebook.github.io\/react\/                               2016-04-17T13:41:18.000Z\nreact-addons-update               dt     http:\/\/facebook.github.io\/react\/                               2016-03-16T15:55:26.000Z\nreact-addons-update               npm    https:\/\/www.npmjs.com\/package\/react-addons-update              2016-03-24T04:43:46.000Z\nreact-bootstrap                   dt     https:\/\/github.com\/react-bootstrap\/react-bootstrap             2016-04-23T13:55:14.000Z\nreact-bootstrap-table             dt     https:\/\/github.com\/AllenFang\/react-bootstrap-table             2016-02-04T15:58:49.000Z\nreact-cropper                     dt     https:\/\/github.com\/roadmanfong\/react-cropper                   2016-04-03T14:21:19.000Z\nreact-datagrid                    dt     https:\/\/github.com\/zippyui\/react-datagrid.git                  2016-03-16T15:55:26.000Z\nreact-day-picker                  dt     https:\/\/github.com\/gpbl\/react-day-picker                       2016-03-16T15:55:26.000Z\nreact-dnd                         dt     https:\/\/github.com\/gaearon\/react-dnd                           2016-03-16T15:55:26.000Z\nreact-dom                         dt     http:\/\/facebook.github.io\/react\/                               2016-04-12T15:40:40.000Z\n<\/pre>\n
You can do an exact search by name, if you know what you want:<\/p>\n
\ntypings search --name react\n<\/pre>\n
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)<\/p>\n
\ntypings install 'dt!react' --ambient --save\n<\/pre>\n
Once this works, it makes a file called “typings.json”:<\/p>\n
\n{\n  \"dependencies\": {\n    \"react\": \"registry:dt\/react#0.14.0+20160423065914\"\n  }\n}\n<\/pre>\n
If you get a project from another developer, you may need to run this:<\/p>\n
\ntypings install\n<\/pre>\n
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).<\/p>\n
To import Typings files, you can add a reference comment at the top of your ts\/tsx file:<\/p>\n
\n\/\/\/ \n<\/pre>\n
Or include it as a line in tsconfig.json:<\/p>\n
\n{\n    \"compilerOptions\": {\n    \"module\": \"commonjs\",\n    \"target\": \"es5\",\n    \"jsx\": \"react\",\n    \"sourceMap\": true,\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"outDir\": \"dist\"\n    },\n    \"exclude\": [\n      \"node_modules\",\n      \"dist\",\n      \"node_modules\",\n      \"typings\"\n    ],\n    \"files\": [\n      \".\/app\/index.tsx\",\n      \".\/typings\/main.d.ts\"\n    ]\n}\n<\/pre>\n
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).<\/p>\n","protected":false},"excerpt":{"rendered":"
All the things you need to get Typings up an running for the first time<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[12],"tags":[302,388,557,558],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t