{"id":1225,"date":"2023-07-24T05:00:00","date_gmt":"2023-07-24T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1225"},"modified":"2023-07-21T15:56:25","modified_gmt":"2023-07-21T22:56:25","slug":"best-practice-using-types-with-the-httpclient","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/best-practice-using-types-with-the-httpclient\/","title":{"rendered":"Best practice: Using types with the HttpClient"},"content":{"rendered":"\n

Here is an example of code I see way too often when people submit their code to our Angular certification exam<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

While I could almost live with the above code, the following example makes me angry (especially because I tell people NOT <\/strong>to do that in bold uppercase characters in my instructions):<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

What’s the problem with that code? It uses any<\/code>, and any<\/code> is dangerous<\/a>. It isn’t good because it turns off type safety. It makes your code less safe; it removes type information, it makes it less maintainable. It’s excruciating when we know that the HttpClient<\/a><\/code> is nice enough to let us specify the type of the data we’re going to get as a response:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Of course, this type of information does not guarantee that the server is going to return data of that shape, so we have to make sure the server is indeed returning that exact type of data.<\/p>\n\n\n\n

But the thing is, once you add that type to your HTTP request, you can (should I say, you must<\/em>) do the following:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

And this is important because when you subscribe to that Observable, Typescript knows what kind of data you receive:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And that is why we use Typescript. Using the above syntax enables autocomplete in your IDE; it brings type safety so you can’t make typos. There are only benefits to using it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Here is an example of code I see way too often when people submit their code to our Angular certification exam: While I could almost live with the above code, the following example makes me angry (especially because I tell people NOT to do that in bold uppercase characters in my instructions): What’s the problem […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,31,3],"tags":[],"class_list":["post-1225","post","type-post","status-publish","format-standard","hentry","category-angular","category-best-practices","category-typescript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1225"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1225\/revisions"}],"predecessor-version":[{"id":1232,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1225\/revisions\/1232"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}