{"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: “reference” example"},"content":{"rendered":"

When you set up Typings, you’ll need to run the following commands to get React to work:<\/p>\n

\ntypings init\ntypings install 'dt!react' --ambient --save\nnpm install react --save\n<\/pre>\n
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
If you do this without ‘ambient’ you get the error below:<\/p>\n
\ntypings\/main\/definitions\/react\/index.d.ts(2322,5): error TS2666: Exports and export assignments are not permitted in module augmentations.\n<\/pre>\n
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
To actually reference the files Typings has installed, you can do this:<\/p>\n
\n\/\/\/ \n'use strict';\n\nimport * as React from 'react';\n\ninterface IMessage {\n  msg: String;\n}\n\nclass TestApp extends React.Component {\n  public render(): Element {\n    return 
test<\/div>;\n  }\n}\n<\/pre>\n
The “main.d.ts” file pulls in type bindings for all libraries you’ve installed. If you want to reference them directly (e.g. to avoid conflicts) you can also do that.<\/p>\n
Alternately, you can create a tsconfig.json, and by writting this out you can remove the “reference” comment entirely:<\/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","protected":false},"excerpt":{"rendered":"
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,"footnotes":""},"categories":[4],"tags":[301,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