{"id":1188,"date":"2021-06-07T12:00:30","date_gmt":"2021-06-07T10:00:30","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1188"},"modified":"2021-06-07T12:07:33","modified_gmt":"2021-06-07T10:07:33","slug":"how-to-use-navigator-and-location-dom-variables-in-typescript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/06\/07\/how-to-use-navigator-and-location-dom-variables-in-typescript\/","title":{"rendered":"How to use navigator and location DOM variables in TypeScript"},"content":{"rendered":"\n<p>Let\u00b4s assume, we need to access some DOM variables like navigator and location.<\/p>\n\n\n\n<p>And we want to do that in typescript. <em>That\u00b4s mean we have to make sure these Windows Objects are declared in our Environment and that we are working with the right Typ<\/em>es. <\/p>\n\n\n\n<p>For that, we have to add option to our\u00a0<strong>tsconfig.json<\/strong>\u00a0file.<\/p>\n\n\n\n<p>Add&nbsp;<strong>dom<\/strong>&nbsp;to&nbsp;<strong>compilerOptions.lib<\/strong>&nbsp;array like here:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"compilerOptions\": {\n        \"lib\": &#91;\n            \"dom\"\n        ]\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>This option will add necessary typings for DOM API.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/06\/image-1.png\" alt=\"\" class=\"wp-image-1193\" width=\"574\" height=\"562\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/06\/image-1.png 865w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/06\/image-1-300x294.png 300w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/06\/image-1-768x753.png 768w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/06\/image-1-24x24.png 24w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2021\/06\/image-1-48x48.png 48w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><figcaption><em><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>lib.ts file <\/strong><\/span><\/em><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let\u00b4s assume, we need to access some DOM variables like navigator and location. And we want to do that in typescript. That\u00b4s mean we have to make sure these Windows Objects are declared in our Environment and that we are working with the right Types. For that, we have to add option to our\u00a0tsconfig.json\u00a0file. Add&nbsp;dom&nbsp;to&nbsp;compilerOptions.lib&nbsp;array [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,83],"tags":[303,27,328,327,87],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1188"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1188\/revisions"}],"predecessor-version":[{"id":1194,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1188\/revisions\/1194"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}