{"id":3938,"date":"2016-04-30T01:14:11","date_gmt":"2016-04-30T01:14:11","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3938"},"modified":"2016-04-30T01:14:11","modified_gmt":"2016-04-30T01:14:11","slug":"typings-reference-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/typings-reference-example\/","title":{"rendered":"Typings: &#8220;reference&#8221; example"},"content":{"rendered":"<p>When you set up Typings, you&#8217;ll need to run the following commands to get React to work:<\/p>\n<pre lang=\"bash\">\ntypings init\ntypings install 'dt!react' --ambient --save\nnpm install react --save\n<\/pre>\n<p>This installs React type bindings, and the library. Note these are really separate things, NPM installs the actual code for React, and typings handles the type bindings, which enforce constraints.<\/p>\n<p>If you do this without &#8216;ambient&#8217; you get the error below:<\/p>\n<pre>\ntypings\/main\/definitions\/react\/index.d.ts(2322,5): error TS2666: Exports and export assignments are not permitted in module augmentations.\n<\/pre>\n<p>If you mess this up, you can edit the typings.json to fix it, delete the typings folder, and run typings init again.<\/p>\n<p>To actually reference the files Typings has installed, you can do this:<\/p>\n<pre lang=\"javascript\">\n\/\/\/ <reference path=\"..\/typings\/main.d.ts\"\/>\n'use strict';\n\nimport * as React from 'react';\n\ninterface IMessage {\n  msg: String;\n}\n\nclass TestApp extends React.Component<IMessage, {}> {\n  public render(): Element {\n    return <div>test<\/div>;\n  }\n}\n<\/pre>\n<p>The &#8220;main.d.ts&#8221; file pulls in type bindings for all libraries you&#8217;ve installed. If you want to reference them directly (e.g. to avoid conflicts) you can also do that.<\/p>\n<p>Alternately, you can create a tsconfig.json, and by writting this out you can remove the &#8220;reference&#8221; comment entirely:<\/p>\n<pre lang=\"javascript\">\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","protected":false},"excerpt":{"rendered":"<p>An example of how to do references in Typescript<\/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,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[301,388,557,558],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3938"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3938"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3938\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}