{"id":1085,"date":"2022-05-09T08:12:05","date_gmt":"2022-05-09T07:12:05","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=1085"},"modified":"2023-03-24T07:34:58","modified_gmt":"2023-03-24T06:34:58","slug":"typescript-custom-type-guards","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2022\/05\/09\/typescript-custom-type-guards\/","title":{"rendered":"TypeScript: custom type guards"},"content":{"rendered":"\n

Type guards are tools for type narrowing<\/a> in TypeScript. You may have used some of those features e.g. typeof<\/code>, instanceof<\/code>, in<\/code> etc. already but I want to describe writing guards for types created by you.<\/p>\n\n\n\n\n\n\n\n

Type Predicate<\/h2>\n\n\n\n

To create a custom guard we need a function that returns a type predicate<\/em>, it is in the form of param is Type<\/code>. There is no naming convention, but I use the guard<\/code> prefix which explicitely indicates the purpose of the function (as opposed to is<\/code> prefix).<\/p>\n\n\n\n

In the guard function you need to make all the required assessments on incoming object and return that result. <\/p>\n\n\n\n

Below is the example implementation:<\/p>\n\n\n

interface<\/span> INavigationAction {\n<\/span><\/span>    type<\/span>: string<\/span>;\n<\/span><\/span>    path: string<\/span>;\n<\/span><\/span>}\n<\/span><\/span>const<\/span> guardINavigationAction = (test: unknown): test is INavigationAction => {\n<\/span><\/span>    const<\/span> has = (prop<\/span>: keyof<\/span> INavigationAction<\/span><\/span>) =><\/span>\n<\/span><\/span>        Object<\/span>.prototype.hasOwnProperty.call(test, prop);\n<\/span><\/span>    return<\/span> typeof<\/span> test === \"object\"<\/span> \n<\/span><\/span>        && !!test \n<\/span><\/span>        && has('type'<\/span>) \n<\/span><\/span>        && has('path'<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>console<\/span>.log(guardINavigationAction({type<\/span>:\"Something\"<\/span>})); \/\/ false<\/span>\n<\/span><\/span>console<\/span>.log(guardINavigationAction({path:\"a\/path\"<\/span>})); \/\/ false<\/span>\n<\/span><\/span>console<\/span>.log(guardINavigationAction({type<\/span>:\"Something\"<\/span>, path:\"a\/path\"<\/span>})); \/\/ true<\/span>\n<\/span><\/span>console<\/span>.log(guardINavigationAction({type<\/span>:\"Something\"<\/span>, path:\"a\/path\"<\/span>, extraParam: true<\/span>})); \/\/ true<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Usage<\/h2>\n\n\n\n
It is handy in all those places where the type narrowing is needed, e.g when union type is used:<\/p>\n\n\n
interface<\/span> IPrintAction {\n<\/span><\/span>    type<\/span>: string<\/span>;\n<\/span><\/span>    orientation: 'PORTRAIT'<\/span> | 'LANDSCAPE'<\/span>;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>const<\/span> action:IPrintAction | INavigationAction;\n<\/span><\/span>if<\/span>(guardINavigationAction(action)) {\n<\/span><\/span>    \/\/ navigate somewhere<\/span>\n<\/span><\/span>}\n<\/span><\/span>else<\/span> {\n<\/span><\/span>    \/\/ print it<\/span>\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
but also in places where you dont know exactly what data is coming e.g. from the API.<\/p>\n\n\n
interface<\/span> IResponseData {\n<\/span><\/span>    prop1: number<\/span>;\n<\/span><\/span>    prop2: string<\/span>;\n<\/span><\/span>}\n<\/span><\/span>const<\/span> guardIResponseData = (test: unknown): test is IResponseData => {\n<\/span><\/span>    const<\/span> has = (prop<\/span>: keyof<\/span> IResponseData<\/span><\/span>) =><\/span>\n<\/span><\/span>        Object<\/span>.prototype.hasOwnProperty.call(test, prop);\n<\/span><\/span>    return<\/span> typeof<\/span> test === \"object\"<\/span> && !!test\n<\/span><\/span>           && has('prop1'<\/span>) && has('prop2'<\/span>);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>const<\/span> response: Response = await<\/span> fetch('api\/path'<\/span>);\n<\/span><\/span>const<\/span> data = await<\/span> response.json(); \/\/ data has `any` type<\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span>(guardIResponseData(data)) {\n<\/span><\/span>    \/\/ it is IResponseData<\/span>\n<\/span><\/span>    console<\/span>.log(data.prop1);\n<\/span><\/span>} else<\/span> {\n<\/span><\/span>    \/\/ some other type<\/span>\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
As shown above type guards are simple yet very useful tools in the programmers arsenal.<\/p>\n","protected":false},"excerpt":{"rendered":"
Type guards are tools for type narrowing in TypeScript. You may have used some of those features e.g. typeof, instanceof, in etc. already but I want to describe writing guards for types created by you.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[356],"tags":[358,357],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/1085"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=1085"}],"version-history":[{"count":14,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"predecessor-version":[{"id":1142,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions\/1142"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}