Type | Treat 2021 - Day 2
Tags: typescript, challenge
Published: 2021-10-26 19:35:06

---
title: Type | Treat 2021 - Day 2
published: true
description: The TypeScript Team challenges
series: type | treat 2021
tags: typescript,challenge
cover_image: https://devblogs.microsoft.com/typescript/wp-content/uploads/sites/11/2021/10/type-or-treat-2021.png
---

## Type | Treat Challenge 2

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

## Yesterday's Solution

### Beginner/Learner Challenge

The first part of the solution for this challenge used `as const` to trigger "Literal Inference" - basically telling TypeScript "Don't convert the array to `string[]` but consider it a constant set of string literals. This meant that `playlist[0]` stopped returning `string` and started returning `"The Legend of Sleepy Hollow by The Monotones.mp3"`. 

```diff
  const playlist = [
      "The Legend of Sleepy Hollow by The Monotones.mp3",
      ...
- ]
+ ] as const
```

The second part of the challenge used [`typeof` types](https://www.typescriptlang.org/docs/handbook/2/typeof-types.html) to extract the type from the `playlist` array. Without the first change, this would be `string` but after the change this meant the full array of different types. You then needed to use the [type index syntax](https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html) `[number]` to declare that you want any potential string from that array.

```diff
- function playSong(song: string) {
+ function playSong(song: typeof playlist[number]) {
      api.play(song)
  }
```

Successfully completing this challenge would raise an error in the final code samples due to a subtle typo.

[Our answer](https://www.typescriptlang.org/play?#code/PTAEEkDtQBwJwKbwIYBcCWB7aAzTdQALZAGxMwHcEFIAaUAT0wFcByANwVACMEBjTAFsuqQlwDOxRABNQAEQBSoPHABQIUKRKMWBHHHQ1p4gHSgAmiw4SEqUMxihREhuNQJBTzKGno3B7mZ3JzFQQWZxdD51MAj0SABzEK5CdEdIBAonBhgEdBwGUABBAAVwMFBVVXRBGHw7AG9UHLyC0vAAX2U4IVAAImbcgFp8IdREND6qgUg3WBJkBhI-OwBeUABtVVAd-oAVUIAZBASjUEwcUABlEmoYQoAJTDJKHkKDrgBZbExUbARTLUAMx9WjbXZ9AAU4FQrHEmgAlKBvrN3HA4aAnstpIs3qAAELMPgAa1AAHkqLMTMDQeCdn18d5PtRUPDnMjsG4EARuIVGfJ0NJpLcGNSYCCwbt+iVmHAYLdQCUEJh5VwAKJobnIlls0IAdXQqD4hHkmD4fx571C+PQSUZMFycDFErp-SufAmgniBK0oEhaHkcGQfGYC0xWiRvNAH3kzBK2FZztpUoZaEEyDooD1zxw6czADEg5BiTQufF6PhA8HQ8g8TG5OhkIJsMYk5KIYWMyXUXloHsKCs66EAMJwVyoUiA8XJiGsA4GMjc1h4z5RYgIbQKYPE8TYJOqAC6mnhMzcVXli2WZ40AD0APwxaMtd0GGB2UTxHchPygH+1q92BcoD+PECTiPQFCpMav5snAzBcEMPBBKAfAZjozCVBo6Ylk+uQvmk74TO+oQXksg7IHAQaFM2iD9MgJ6chOkCsn0D6qKedjIDA6CgOsgytAw7SQn0ggMAA+lx6BiSWDB9AiqiSSYMwZOakLyaoODMJA5pYNApFXNgCSQruiQAFzZLkQGkQBGyQMwgi8HAB5Ig0rqKaRxmGfJHTngsDAGYkwkynKCpKiqCoami2q2LqXAGkaJpyGaFpDlwNp2iqjpJupGgHD+FD4F+CREQAhASyGGihLAkLIvCaKAyyoKgCo0VwiCRFyzFeBZmDgShaFMMwj4fsW5yXLWFC4n8KHEIkIihAABvphkLaAC0mQkq0wBRTa2FqiARPNXADC0Fx9MkmFgNZKz0LuIQBnsz4egRoBBn4AKaNA3I9AQ+TJIgGK1oMmBsctgVQjCgNIiiXLovCWKCriUaEiS5KUlOILyWDRl9DGxynJAshATcdyPM85BZFGMYor8-wY3JqjY8J+Jphm9DZiQuZs6AnbFqW7jlucBByBRIZhlToQNk2Lb0wiQA).

### Intermediate/Advanced Challenge 

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`](https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype) with [`typeof myFunc`](https://www.typescriptlang.org/docs/handbook/2/typeof-types.html) 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.

```diff
  const findOldCostume = () => {
      // ...
      return { jumpSuit, estimate }
  }
  
- const createNewMask = (costume: any) => {
+ const createNewMask = (costume: ReturnType<typeof findOldCostume>) => {
      // ...
      return { ...costume, mask }
  }

```

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.

```ts
type Costume = ReturnType<typeof assembleCostume>
```

[Our Answer](https://www.typescriptlang.org/play?#code/PTAEGEHsGcBcFcC2BTUAHATstpYEsUAaUAT0nlADM8BzeLUAIgHcALE0AO0llABMs0aKHg4ANngDWyAFAhcrVAENOsJTUic8cYXk4LUAZQCO8PH1ABxJSgD8jYnl7RkyRMMzJYsDsiXQSOTAAI39kC01ScgxQSDELcH8lflQABSU0ZDFY+FhqWAA6UCDQAApQVm80aAAuED54AGNJBuaNAsbIRGBbYwBeRqSAaj5kIbQMrIAyPCUADz6CdWRoGaVFxGXoAEoZEoBNclAXXn9zVHwUXEgqWnpUcl42JV4yeAByBg09GmuuVwssBuJU6nAAbsgMLxYIpQKC4EhlJwLNBpLBGqwctDYWgeMhVLNssxIBhJNcSjQ8BCovQXGJKKAVKBzslIAzLitBmJkDU9gRcVDQABvFxKDAY4iYPSwSEAXyoGC6TB8mQAtCTVbAsC9GHt4bxqMiAPLxKAIq59MrbUB9AB8wpkoCdcM0cFAACskGhDGZeJbReLWAUXvhGqVrQAfCPHPyBjpiGBecOgKMxsUYgo0MXLcOO5360ArS4vVCWgDMAAY806sAgMPohR6vT6nMQi0sZaBZTJuzIC41tTKAHLIZgAWX8ZMtpU65p5oAASl56JwACokTIAHhVyDZt2NppgCBQtutdodzpdnDdm1RNvQGGlkIKUtUE9Rucvt8kBWgrEm96MI0eDityuqXrOx7IAU7abJ2QyWgAbFWl61iuwqgAUWGQYixDfl2PZ6q6vADn4MoAEKQHwJCJCgGDJNOOEoDUTpLnWa4bsg26cXupEliO46TqeNr2kK1ZXm6gx0QxD5PhgL6PqotGQkon7OvIACSTx4GI2ScAC6BKNKPzXJA4lMdBsElqACGgAALAArOJaH1hhWEdEeuFwjYKkEb2Bb+C4iDBNyZpQfeybnmJqHLq5fEUVRNE+fRM6DsgAnvpIpSGnwJp8GFiLhtsuy9vIliDsQMLaHCaXCEygVuCFHASPpsQMkoukGIZUJ1ciJQwqgxKkjS-zhH8fCQEUAASkDMMgEIYI4vBYBIKyxPoAAGKgkBtwhsHgGLFPImzSHtJKSCZzBOJiA2Mo0CAdS6c6MqAwROIywV3OQtREdeJGeRajJCI1oUA8gubyM6AB6th7PIiT6G8Ch6GSe7JMwSgcECtxzF1eiUJC+KNIN12PDVZE-CU+nMKAG07rtsQxBtcmUEoxO7cQJKgFgaBiGzJm3dte3XbTjbuV2G2wyUGmjB1YhY6w1U7numCQCFbjefowSoNAcQQiiNwwi8I2DJwJQncocL-pwNCoHo60POysKUPAnD3XgrqMsiXA8KNgI3KIfDWbdO7QAUcNgIcHydZI3A0+9Q3SBYbD4sjwgtag9HaGtTKQoqGB9q6cTQQmNClBtWnHKw5DxLgSjSIywRkwAJEKFkFBy8qIHouQrBtuwlEOs0KMbc3vNSGinKAicmWgeCZBnxCmyNtv6fRnbJDuJT7YdPOCPisDCLd+J8KqcDWWjwPBaDz26yPvA8IoGDQCCTJYKq8AuMyvB8zKGBSzuCAYN7xsRXOuLcyt2pX3VgVE8QA).

## The Challenge

### Beginner/Learner Challenge

[Help sort out a large array of pumpkins, and then get cooking soup.](https://www.typescriptlang.org/play?#gist/927ccc66ae3022dc64c4f650109b937a-5)


### Intermediate/Advanced Challenge  

[Fresh back from robotics camp, can you make the perfect punch mixer bot?](https://www.typescriptlang.org/play?#gist/927ccc66ae3022dc64c4f650109b937a-6)

## How To Share Your Solution

Once you feel you have completed the challenge, you will need to select the **Share** button in the playground. This will automatically copy a playground URL to your clipboard.

Then either:

 - Go to Twitter, and create a tweet about the challenge, add the link to your code and mention the [@TypeScript](https://twitter.com/typescript) Twitter account with the hashtag [#TypeOrTreat](https://twitter.com/search?q=%23TypeOrTreat).

 - Leave us a comment with your feedback on the [dev.to](https://dev.to/typescript) post, or in this post.

### Best Resources for Additional Help

If you need additional help you can utilize the following:

- [The New TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
- The [TypeScript Community Discord](https://discord.com/invite/typescript)
- The comments on each [Dev.to](https://dev.to/typescript) post!
- Our previous [`Type | Treat` 2020 challenges](https://www.typescriptlang.org/play/#gist/303ebff59a6fc37f88c86e86dbdeb0e8-0)


Happy Typing :)