{"id":3179,"date":"2021-10-30T07:00:11","date_gmt":"2021-10-30T15:00:11","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/typescript\/?p=3179"},"modified":"2021-10-30T07:07:24","modified_gmt":"2021-10-30T15:07:24","slug":"type-treat-wrap-up","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/type-treat-wrap-up\/","title":{"rendered":"Type | Treat \u2013 Wrap-up"},"content":{"rendered":"

Type | Treat Challenge Wrap-up<\/h2>\n

That’s all the challenges done! If you missed any of the challenges they’re all available in the Playground here<\/a>. Let’s talk through the final answers to day 5’s challenges.<\/p>\n

Yesterday’s Solution<\/h2>\n

Beginner\/Learner Challenge<\/h3>\n

In this challenge we were working with an existing object literal which had been as const<\/code>‘d. The goal was to use keyof<\/code> and typeof<\/code> to extract interesting sets of strings from the object. The first being the keys in the object:<\/p>\n

\n
-<\/span> type SchemeNames = \"background\" | \"textColor\" | \"highlightOne\"<\/span>\r\n+<\/span> type SchemaNames = keyof typeof scheme<\/span><\/pre>\n<\/div>\n
Ideally, you might have noticed the ‘key of’ in the comment, which could have led you to keyof<\/code>, from there you needed to re-use typeof<\/code> to extract the type from scheme<\/code>. This gets all of the keys from that constant.<\/p>\n
Next, we asked if you could improve<\/p>\n
\n
function<\/span> possibleSchemeItems<\/span>(<\/span>colors<\/span>: any<\/span>)<\/span>: string<\/span>[<\/span>]<\/span> {<\/span>\r\n    const<\/span> keys<\/span> =<\/span> Object<\/span>.<\/span>keys<\/span>(<\/span>colors<\/span>)<\/span> as<\/span> string<\/span>[<\/span>]<\/span>\r\n    return<\/span> keys<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
In this case, you can switch string<\/code> to SchemeNames<\/code> – this example was made so that there was an interesting function to play around with. You could switch colors<\/code> to typeof schema<\/code> but nothing you do around Object.keys<\/code> would keep the types retained. This is kind of interesting, the reasoning is that TypeScript cannot make reasonable<\/em> guarantees that the return value of Object.keys<\/code> actually is<\/em> keyof typeof colors<\/code> (because of JavaScript prototype chaining) and so you have to re-type that line. Interesting.<\/p>\n
\n
function<\/span> possibleSchemeItems<\/span>(<\/span>colors<\/span>: typeof<\/span> scheme<\/span>)<\/span>: SchemaNames<\/span>[<\/span>]<\/span> {<\/span>\r\n    const<\/span> keys<\/span> =<\/span> Object<\/span>.<\/span>keys<\/span>(<\/span>colors<\/span>)<\/span> as<\/span> SchemaNames<\/span>[<\/span>]<\/span>\r\n    return<\/span> keys<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
Next we had you figure out how to get the values of schema<\/code> as a union:<\/p>\n
\n
-<\/span> type PossibleColors = '#242424' | '#ffa52d' | '#cafe37'<\/span>\r\n+<\/span> type PossibleColors = typeof scheme[SchemaNames]<\/span><\/pre>\n<\/div>\n
We tried to be quite explicit in the clue leading up to this one, because jumping to an indexed type might not be instinctive for beginners. This we considered to be the trickiest part of the challenge.<\/p>\n
Then to wrap up the challenge, and to make sure the types you are creating are constructive in a real world-ish scenario, we presented a Record<\/code> to see if you knew that the first parameter can be a list of keys:<\/p>\n
\n
-<\/span> type Scheme = Record<string, string>;<\/span>\r\n+<\/span> type Scheme = Record<SchemaNames, string>;<\/span><\/pre>\n<\/div>\n
Which would cause a compiler error with previousScheme<\/code> – letting you know it worked.<\/p>\n
Our answer<\/a><\/p>\n
Intermediate\/Advanced Challenge<\/h3>\n
For this challenge, we started with the type we wanted you to write, and then tried to find incremental steps which built up in complexity till you hit it.<\/p>\n
The total change we were looking for was this:<\/p>\n
\n
function<\/span> handleSale<\/span>(<\/span>events<\/span>: Record<\/span><<\/span>string<\/span>,<\/span> (<\/span>e<\/span>: Books<\/span>)<\/span> =><\/span> void<\/span><\/span>><\/span>)<\/span> {<\/span>\r\n  \/\/ ... <\/span>\r\n}<\/span><\/pre>\n<\/div>\n
To:<\/p>\n
\n
function<\/span> handleSale<\/span>(<\/span>events<\/span>: {<\/span> [<\/span>Book<\/span> in<\/span> Books<\/span> as<\/span> `on${<\/span>Book<\/span>[<\/span>\"genre\"<\/span>]<\/span>}<\/span><\/span>`<\/span>]<\/span>?: (<\/span>e<\/span>: Book<\/span>)<\/span> =><\/span> void<\/span><\/span> }<\/span>)<\/span> {<\/span>\r\n  \/\/ ... <\/span>\r\n}<\/span><\/pre>\n<\/div>\n
Getting there is a bit of a jump!<\/p>\n
We first asked you to switch the string<\/code> in the Record<\/code> to be Books<\/code>:<\/p>\n
\n
-<\/span> function handleSale(events: Record<string, (e: Books) => void>) {<\/span>\r\n+<\/span> function handleSale(events: Record<keyof IncomingBookMap, (e: Books) => void>) {<\/span><\/pre>\n<\/div>\n
The next step was to remove the Record<\/code> and replace it with its underlaying mapped type:<\/p>\n
\n
-<\/span> function handleSale(events: Record<string, (e: Books) => void>) {<\/span>\r\n+<\/span> function handleSale(events: { [Book in keyof IncomingBookMap]?: (e: Books) => void }) {<\/span><\/pre>\n<\/div>\n
The ?<\/code> being the key that if you searched the TypeScript documentation for “mapping modifier”<\/a> you’d see the documentation around mapped types<\/a> which we also improved in the process of making this challenge.<\/p>\n
We thought that could be enough for some folk, and that was a good pausing point and thus classed the final change as a bonus. That jump revolved around using key remapping via as<\/code> in the mapped type.<\/p>\n
- function handleSale(events: { [Book in keyof IncomingBookMap]?: (e: Books) => void }) {\r\n+ function handleSale(events: { [Book in Books as `on${Book[\"genre\"]}`]?: (e: Book) => void }) {\r\n<\/code><\/pre>\n
The IncomingBookMap<\/code> existed specifically to add the prefix on<\/code> to the genre of each book, which is handled by template string literals. All of the documentation for these concepts are in the same page, so after a few reads it should hopefully all make sense.<\/p>\n
This system is more or less<\/em> how the DOM’s event system works, and is what the idea is loosely based on, from lib.dom.d.ts<\/code><\/a>:<\/p>\n
\n
interface<\/span> DocumentAndElementEventHandlersEventMap<\/span> {<\/span>\r\n    \"copy\"<\/span>: ClipboardEvent<\/span>;<\/span>\r\n    \"cut\"<\/span>: ClipboardEvent<\/span>;<\/span>\r\n    \"paste\"<\/span>: ClipboardEvent<\/span>;<\/span>\r\n}<\/span>\r\n\r\ninterface<\/span> DocumentAndElementEventHandlers<\/span> {<\/span>\r\n        addEventListener<\/span><<\/span>K<\/span> extends<\/span> keyof<\/span> DocumentAndElementEventHandlersEventMap<\/span>><\/span>(<\/span>type<\/span>: K<\/span>,<\/span> listener<\/span>: (<\/span>this<\/span>: DocumentAndElementEventHandlers<\/span>,<\/span> ev<\/span>: DocumentAndElementEventHandlersEventMap<\/span>[<\/span>K<\/span>]<\/span>)<\/span> =><\/span> any<\/span>,<\/span> options<\/span>?: boolean<\/span> |<\/span> AddEventListenerOptions<\/span>)<\/span>: void<\/span><\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
Roughly translates to english as “DocumentAndElementEventHandlersEventMap” shows how to handle document.addEventListener(\"copy\", (evt) => { ... })<\/code> and what to map the first argument of that function to. The DOM types can’t really switch to use a template literal because not all properties have an on<\/code> prefix, but it’s a pretty logical expansion of the idea in specific cases.<\/p>\n
Our answer<\/a>.<\/p>\n
Thanks!<\/h3>\n
There are a few people involved in getting Types | Treat<\/code> running whose name you don’t see on the masthead: Gabriella<\/a> and Daniel<\/a> on the TypeScript team, and the folks in the TypeScript Community Discord – especially webstrand<\/a> and michael<\/a>. My wife, Danger<\/a>, should probably also get a shout for helping to provide themes – we’ve done 40 challenges so far and have to dig pretty deep occasionally to be fun and topical.<\/p>\n
Feedback<\/h4>\n
If you gave Types | Treat<\/code> a shot, we love for you to run through our 6 question survey<\/a> which help us figure out how to change and improve. Feedback on Twitter is useful, but there’s only so much context you can gve in 280 characters!<\/p>\n
From here?<\/h3>\n
If you’ve not done the 2020 Type | Treat<\/code><\/a>, it’s also good!<\/p>\n
There’s a small write-up with some of the behind the scenes details for Type | Treat on the TypeScript Website updates thread<\/a>.<\/p>\n
If you want to challenge yourself further, check out types-challenges<\/a> this clever system of type challenges goes all the way up to “very challenging for the TypeScript team” and also run entirely in the TypeScript Playgound. It’s great work and a fun system for learning.<\/p>\n","protected":false},"excerpt":{"rendered":"
Type | Treat Challenge Wrap-up That’s all the challenges done! If you missed any of the challenges they’re all available in the Playground here. Let’s talk through the final answers to day 5’s challenges. Yesterday’s Solution Beginner\/Learner Challenge In this challenge we were working with an existing object literal which had been as const‘d. The […]<\/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-3179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript"],"acf":[],"blog_post_summary":"
Type | Treat Challenge Wrap-up That’s all the challenges done! If you missed any of the challenges they’re all available in the Playground here. Let’s talk through the final answers to day 5’s challenges. Yesterday’s Solution Beginner\/Learner Challenge In this challenge we were working with an existing object literal which had been as const‘d. The […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/3179","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=3179"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/posts\/3179\/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=3179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/categories?post=3179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/typescript\/wp-json\/wp\/v2\/tags?post=3179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}