{"id":7255,"date":"2019-09-27T22:08:46","date_gmt":"2019-09-27T22:08:46","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7255"},"modified":"2019-09-27T22:08:46","modified_gmt":"2019-09-27T22:08:46","slug":"the-is-type-guard-in-typescript","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/the-is-type-guard-in-typescript\/","title":{"rendered":"The “is” type guard in TypeScript"},"content":{"rendered":"

The is<\/em> keyword can be used to narrow types in TypeScript. What this means is that, for example if we’re testing whether an any<\/em> parameter is a string a number or whatever, TypeScript will see the type as that type in subsequent code. <\/p>\n

For example if we have the following functions<\/p>\n

\r\nfunction isString(test: any): test is string {\r\n  return typeof test === "string";\r\n}\r\n\r\nfunction isNumber(test: any): test is number {\r\n  return typeof test === "number";\r\n}\r\n<\/pre>\n
Each function simply takes a parameter of type any<\/em> then if the return is true the parameter in subsequent code is seen by TypeScript as that type, i.e. Let’s assuming we have a some function which happens to use these functions, like this<\/p>\n
\r\nfunction run(a: any) {\r\n  if(isString(a)) {\r\n    console.log(a)\r\n  }\r\n  if(isNumber(a)) {\r\n    console.log(a)\r\n  }\r\n}\r\n<\/pre>\n
If you’re using Visual Code (for example) the TypeScript type popup (display when you move the mouse over the parameter a<\/em> will show the type to be any<\/em> in the run parameter list, or in any of the isXXX function parameters. But in the console.log<\/em> after each isXXX function, TypeScript will interpret the type to be a string (in the case of isString) and a number (in the case if isNumber) hence using intellisense on the variables will list the methods etc. for a string and those for a number respectively<\/p>\n
So basically the is<\/em> keyword will appear to convert the parameter to the specified type if the function returns true.<\/p>\n
To look at it another way we could instead write something like this<\/p>\n
\r\nfunction isString(test: any): boolean {\r\n    return typeof test === "string";\r\n}\r\n\r\nfunction isNumber(test: any): boolean {\r\n    return typeof test === "number";\r\n}\r\n\r\nfunction run(a: any) {\r\n  if(isString(a)) {\r\n    const b = a as string;\r\n    console.log(b)\r\n  }\r\n  if(isNumber(a)) {\r\n    const b = a as string;\r\n    console.log(b)\r\n  }\r\n}\r\n<\/pre>\n
For completeness, here’s the function syntax for a const style function<\/p>\n
\r\nconst isString = (test: any): test is string => {\r\n  return typeof test === "string";\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
The is keyword can be used to narrow types in TypeScript. What this means is that, for example if we’re testing whether an any parameter is a string a number or whatever, TypeScript will see the type as that type in subsequent code. For example if we have the following functions function isString(test: any): test […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-7255","post","type-post","status-publish","format-standard","hentry","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7255"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7255\/revisions"}],"predecessor-version":[{"id":7463,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7255\/revisions\/7463"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}