DEV Community

Cover image for Type | Treat 2021 - Day 2
Orta for typescript

Posted on • Updated on

Type | Treat 2021 - Day 2

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".

  const playlist = [
      "The Legend of Sleepy Hollow by The Monotones.mp3",
- ]
+ ] as const
Enter fullscreen mode Exit fullscreen mode

The second part of the challenge used typeof types 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 [number] to declare that you want any potential string from that array.

- function playSong(song: string) {
+ function playSong(song: typeof playlist[number]) {
Enter fullscreen mode Exit fullscreen mode

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

Our answer.

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 with typeof myFunc 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.

  const findOldCostume = () => {
      // ...
      return { jumpSuit, estimate }

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

Enter fullscreen mode Exit fullscreen mode

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.

type Costume = ReturnType<typeof assembleCostume>
Enter fullscreen mode Exit fullscreen mode

Our Answer.

The Challenge

Beginner/Learner Challenge

Help sort out a large array of pumpkins, and then get cooking soup.

Intermediate/Advanced Challenge

Fresh back from robotics camp, can you make the perfect punch mixer bot?

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 Twitter account with the hashtag #TypeOrTreat.

  • Leave us a comment with your feedback on the post, or in this post.

Best Resources for Additional Help

If you need additional help you can utilize the following:

Happy Typing :)

Top comments (7)

cherryblossom000 profile image
lemuelcushing profile image
Lemuel Cushing • Edited

All the solutions I saw for the begginer challange had either a hardcoded shape for the three pumpkin types, or inferred them from the array, which also locked the Pumpkin type to only the existing combos. (So, no white ripe pumpkin can exist?)

I tried here to create freely combinable version, but it seems to only half worked. First, I had to Omit the soundWhenHit from the base type before I could create the filtering one, not sure why.
Second, the cookPumpkinSoup() still complains. I guess it can't now idetify the initial array as consising of Pumpkins? I'm a bit lost.

orta profile image

I feel ya' - I've added the next post in the series which covers our versions of the answers:

surelyplus profile image
surelyplus • Edited

Yes, you can import the soup function and let the library do the cooking work ;-)


No Casting for the vending, but interested how this can be solved better if more than 2 vending types are used:

drothmaler profile image
Daniel Rothmaler • Edited

And the next one:

leko profile image
tusharar091 profile image

My Solution