{"id":3156,"date":"2021-10-26T11:28:18","date_gmt":"2021-10-26T19:28:18","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/typescript\/?p=3156"},"modified":"2023-04-27T13:10:08","modified_gmt":"2023-04-27T21:10:08","slug":"type-treat-2021-day-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/type-treat-2021-day-2\/","title":{"rendered":"Type | Treat 2021 \u2013 Day 2"},"content":{"rendered":"

Type | Treat Challenge 2<\/h2>\n

Welcome to the second 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 two, which means going over the answers from yesterday and showcasing 2 new challenges.<\/p>\n

Yesterday’s Solution<\/h2>\n

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

The first part of the solution for this challenge used as const<\/code> to trigger “Literal Inference” – basically telling TypeScript “Don’t convert the array to string[]<\/code> but consider it a constant set of string literals. This meant that playlist[0]<\/code> stopped returning string<\/code> and started returning \"The Legend of Sleepy Hollow by The Monotones.mp3\"<\/code>.<\/p>\n

\n
  const playlist = [\r\n      \"The Legend of Sleepy Hollow by The Monotones.mp3\",\r\n      ...\r\n-<\/span> ]<\/span>\r\n+<\/span> ] as const<\/span><\/pre>\n<\/div>\n
The second part of the challenge used typeof<\/code> types<\/a> to extract the type from the playlist<\/code> array. Without the first change, this would be string<\/code> but after the change this meant the full array of different types. You then needed to use the type index syntax<\/a> [number]<\/code> to declare that you want any potential string from that array.<\/p>\n
\n
-<\/span> function playSong(song: string) {<\/span>\r\n+<\/span> function playSong(song: typeof playlist[number]) {<\/span>\r\n      api.play(song)\r\n  }<\/pre>\n<\/div>\n
Successfully completing this challenge would raise an error in the final code samples due to a subtle typo.<\/p>\n
Our answer<\/a>.<\/p>\n
Intermediate\/Advanced Challenge<\/h3>\n
This pattern is quite common in code we write in TypeScript codebases, you create one function which takes the result of another and keeps passing objects between functions in a pipeline. One of the best techniques for simplifying this design pattern is to use ReturnType<\/code><\/a> with typeof myFunc<\/code><\/a> to map the return type of one function to the paramter of another. This removes the need for intermediary types which need to be updated when the functions change.<\/p>\n
\n
  const findOldCostume = () => {\r\n      \/\/ ...\r\n      return { jumpSuit, estimate }\r\n  }\r\n  \r\n-<\/span> const createNewMask = (costume: any) => {<\/span>\r\n+<\/span> const createNewMask = (costume: ReturnType<typeof findOldCostume>) => {<\/span>\r\n      \/\/ ...\r\n      return { ...costume, mask }\r\n  }\r\n<\/pre>\n<\/div>\n
The little extra step at the end was a small reminder that you can use this technique to provide a type which can be re-used everywhere.<\/p>\n
\n
type<\/span> Costume<\/span> =<\/span> ReturnType<\/span><<\/span>typeof<\/span> assembleCostume<\/span>><\/span><\/pre>\n<\/div>\n
Our Answer<\/a>.<\/p>\n
The Challenge<\/h2>\n
Beginner\/Learner Challenge<\/h3>\n
Help sort out a large array of pumpkins, and then get cooking soup.<\/a><\/p>\n
Intermediate\/Advanced Challenge<\/h3>\n
Fresh back from robotics camp, can you make the perfect punch mixer bot?<\/a><\/p>\n
How To Share Your Solution<\/h2>\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