{"id":4114,"date":"2016-05-14T02:47:40","date_gmt":"2016-05-14T02:47:40","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=4114"},"modified":"2016-05-14T02:47:40","modified_gmt":"2016-05-14T02:47:40","slug":"fixing-typescript-error-type-number-number-number-not-assignable-type-number","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/fixing-typescript-error-type-number-number-number-not-assignable-type-number\/","title":{"rendered":"Fixing Typescript error:  Type &#8216;(number | [number, number])[]&#8217; is not assignable to type &#8216;number[]&#8217;"},"content":{"rendered":"<p>If you try to assign an array you create to another array in Typescript, you can get an error like so:<\/p>\n<pre lang=\"javascript\">\nlet range: number[];\nrange = [\n  brush.extent()[0], \n  brush.extent()[1]\n];\n<\/pre>\n<p>E.g.:<\/p>\n<pre>\n(91,9): error TS2322: Type '(number | [number, number])[]' is not assignable to type 'number[]'.\n  Type 'number | [number, number]' is not assignable to type 'number'.\n    Type '[number, number]' is not assignable to type 'number'.\n<\/pre>\n<p>This is because the output of the type you&#8217;re assigning from is ambiguous (I&#8217;m using D3).<\/p>\n<p>You can convince yourself of this by doing this:<\/p>\n<pre lang=\"javascript\">\nrange = [1, 2];\n<\/pre>\n<p>One way to fix this is to use the full type definition, if this helps you:<\/p>\n<pre lang=\"javascript\">\nlet range: [number, number] | [[number, number], [number, number]];\n<\/pre>\n<p>You can also fix this by adding type guards around the assignment:<\/p>\n<pre lang=\"javascript\">       \nconst extent = brush.extent();\nlet first = extent[0];    \nlet second = extent[1];\nif (typeof first === 'number' && typeof second === 'number') {          \n  range = [first, second];\n}    \n<\/pre>\n<p>This shows some unusual magic in Typescript &#8211; the type guard causes an implicit resolution of the type.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fixing type casting errors 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":[9],"tags":[302,557],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4114"}],"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=4114"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4114\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=4114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=4114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=4114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}