Welcome to the fifth, and last, This challenge aimed to be generics 101, first introducing the concept of making your function pass a type from the function to the argument:<\/p>\n The The second part involved understanding generic constraints<\/a>, these are essential tools in helping you define the baselines for types which can be used in your function. In this case we didn’t provide the word “constraints” but opted for a more cryptic clue by setting up the function most of the way, then saying you only needed two words:<\/p>\n By saying that Our answer<\/a><\/p>\n The intermediate challenge also invovled generic constraints, so if you had just finished the beginner’s then you were in a good place to figure this challenge. The key is to make a<\/p>\n This is testing a few different things:<\/p>\n We left a tricky problem with this challenge, but explicitly didn’t call it out. The function This version from @faridz974<\/a> would ensure that the right values were used in the function (e.g. you couldn’t accidentally put in an object to something which could only accept Our answer<\/a>.<\/p>\n Update your website’s color scheme for Halloween and tidy the codebase up a bit<\/a>.<\/p>\n Handle a book stores halloween discount event<\/a><\/p>\n Once you feel you have completed the challenge, you will need to select the Share<\/strong> button in the playground. This will automatically copy a playground URL to your clipboard.<\/p>\n Then either:<\/p>\n If you need additional help you can utilize the following:<\/p>\n Happy Typing \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" Type | Treat Challenge 5 Welcome to the fifth, and last, Type | Treat challenge! These challenges are a series of blog posts which have 2 code challenges in, one for beginners and one for intermediate TypeScript programmers. We’re on day five, which means going over the answers from yesterday and have 2 new challenges. […]<\/p>\n","protected":false},"author":6925,"featured_media":3143,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":" Type | Treat Challenge 5 Welcome to the fifth, and last, Type | Treat challenge! These challenges are a series of blog posts which have 2 code challenges in, one for beginners and one for intermediate TypeScript programmers. We’re on day five, which means going over the answers from yesterday and have 2 new challenges. […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/3172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/users\/6925"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/comments?post=3172"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/3172\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media\/3143"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/media?parent=3172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=3172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=3172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Type | Treat<\/code> challenge! These challenges are a series of blog posts which have 2 code challenges in, one for beginners and one for intermediate TypeScript programmers. We’re on day five, which means going over the answers from yesterday<\/a> and have 2 new challenges.<\/p>\nYesterday’s Solution<\/h2>\n
Beginner\/Learner Challenge<\/h3>\n
-<\/span> function getBowl(items: any) {<\/span>\r\n+<\/span> function getBowl<T>(items: T) {<\/span>\r\n return { items }\r\n }<\/pre>\n<\/div>\nany<\/code> acted as hint clue about where to look, and this example is almost the first code sample on the Generics chapter<\/a> in the Handbook, so it felt like a good intro.<\/p>\n-<\/span> function fillBowl<T>(candy: T) {<\/span>\r\n+<\/span> function fillBowl<T extends string>(candy: T) {<\/span>\r\n return { candy }\r\n }<\/pre>\n<\/div>\nT<\/code> extended string<\/code> then the string literals are correctly passed through the function – which removes all the compiler errors.<\/p>\nIntermediate\/Advanced Challenge<\/h3>\n
-<\/span> const check = (data: Competitor[]) => {<\/span>\r\n+<\/span> const check = <Type extends Competitor> (data: Type[]) => {<\/span>\r\n return data.map(competitor => {\r\n if (competitor.weight > 2121.5) throw new Error(\"Stop the show, world record hit!\")\r\n return { ...competitor, judge: (...args: unknown[]) => { } }\r\n })\r\n }<\/pre>\n<\/div>\n\n
extends<\/code> constraint for the interface subtypes<\/li>\njudge: (...args: unknown[])<\/code> is a types gap. There is no validating that the judge function actually works like expected. There are two approaches for handling this:<\/p>\n-<\/span> return { ...competitor, judge: (...args: unknown[]) => { } }<\/span>\r\n+<\/span> return { ...competitor, judge: (...args: Array<T[keyof T]>) => { } }<\/span><\/pre>\n<\/div>\nstring<\/code> and number<\/code>s) but it ignored the order. An accurate, but whole-heartedly not recommended for production version which does take order into account comes from converting an interface to a tuple on GitHub<\/a> which is a bit too long to print in here, but here’s a working implementation in the playground<\/a>.<\/p>\nThe Challenge<\/h2>\n
Beginner\/Learner Challenge<\/h3>\n
Intermediate\/Advanced Challenge<\/h3>\n
How To Share Your Solution<\/h2>\n
\n
Best Resources for Additional Help<\/h3>\n
\n
Type | Treat<\/code> 2020 challenges<\/a><\/li>\n<\/ul>\n