{"id":3944,"date":"2016-04-29T00:35:38","date_gmt":"2016-04-29T00:35:38","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3944"},"modified":"2016-04-29T00:35:38","modified_gmt":"2016-04-29T00:35:38","slug":"typescript-typings-require","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/typescript-typings-require\/","title":{"rendered":"Typescript, Typings and require"},"content":{"rendered":"<p>When you use typings and Typescript, you can use ES6 imports (rather than require). For instance, you would do this:<\/p>\n<pre lang=\"javascript\">\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>To get React to be available, you would first need to install it:<\/p>\n<pre lang=\"bash\">\ntypings install react --ambient --save\n<\/pre>\n<p>You also need a tsconfig.json to list the files you want to import. Importing the main.d.ts auto imports everything you&#8217;ve installed:<\/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>Set up imports in typescript with external libraries<\/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":[302,387,388,557,558],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3944"}],"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=3944"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3944\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}