Type | Treat 2021 - Day 5
Tags: typescript, challenge
Published: 2021-10-29 19:59:59

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

## 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](https://devblogs.microsoft.com/typescript/type-treat-2021-day-4/) and have 2 new challenges.

## Yesterday's Solution

### Beginner/Learner Challenge

This challenge aimed to be generics 101, first introducing the concept of making your function pass a type from the function to the argument:

```diff
-  function getBowl(items: any) {
+  function getBowl<T>(items: T) {
      return { items }
  }
```

The `any` acted as hint clue about where to look, and this example is almost the first code sample on the [Generics chapter](https://www.typescriptlang.org/docs/handbook/2/generics.html) in the Handbook, so it felt like a good intro.

The second part involved understanding [generic constraints](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints), 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:

```diff
-  function fillBowl<T>(candy: T) {
+  function fillBowl<T extends string>(candy: T) {
      return { candy }
  }
```

By saying that `T` extended `string` then the string literals are correctly passed through the function - which removes all the compiler errors.


[Our answer](https://www.typescriptlang.org/play?#code/PTAEE0HsFcHIDcCmoDmkAuoCeMBOBnRAGwDNQAjaAOwGMALUSM8yAdyP0bJoEMqATLABoK0TOjrIW7Tj1zIAUCFAAraPkwAiFIiqJcASxqaKbDgDoIMULyqgADmNB8sEg1RSh3oCYgC2Inz8qIiYLm4eSmDkPDQA1oxOTD6SfpYKCiTUNOgGkHY66ABCZgA8ACoAfAAUBuj++ABcoOUAlKAA3gqgPaDy6NC4dh1e9X6cAL4KUwo0+Ro2kqxYALIGAB4l7KAAvCHFZtUjc0SQBM0A2pry-Joi2vK6d6Ca5ETQiJoAuiIauDyscj6QyIJovfCQPyfUATVpRXo9AB6AH4MnMqAtbPwDIh+ABBez2IigrZEXb7UlHHxYeygy6acp8FB0aDvZ6aFY8ADnAGPQPxIM4-Gd2eUmCREMgCUTQd8YXDlAjQCiMspynQDJxNc5QPg6DwoSIgbx1MgDPxEDwiEQsCltawYERgv9NcgeDZIfYDMTcM5cLgzo00UEcfjCcT8KTzHUGuZ0DTEBcAAxfVVgADCfGw1giCWS7tYPFt6EFxPEkgccgNoX0XFAAANCqT66A4pL7ClkPHaaB4cl6zHxi2JAHoMzO6AsrRcvlURl5wv4QBleyQb36ThA06sZyySu4TDJXygRDreoYvJ2I8azing0yxcL5RL3LWnXkOqTwa+X0kM4pSBCEYOwiDkHRdRoR4MUfeF00gSAiBEH8zUwTVF2UKA4CQVAMGzQZCFIURaAYZJpA4OssWEURyykMxZHkXtlDUBZtF0fQjBMMj8EsTDUH+cgdQlHcSD4GhbXIf4BFxUBGnQPxmi45wBHhEhvTJY9FNYOoGF8AxfUo8wMinHJL0nNTSQqE8z10fhOD+dwUBqSjmjaTpul6fpBmGGwgltKYZnRBY-DkSMzHJVTrUpTRgoITQ4UCzB8CoIw2wIUlwvMw5NCSlKNzi2Z5kSuI6nQCN0r2CKiCi-BivQUrZTheEAElxC8zgYHLHgwknRAd2K2y-WQL14mLOgYGZIR4SCYCbVAQsqHEQVCmArsEzrHyBFtEgAz8E9YgYMjDIKjFMBQAwkAAeTEJdkviDdyWqP5mmy27UvwOLdkqToYWOhYzsu67avqzg9ke9BcGemqSojD6di+kYpgS1BzsQK70E5NKQoep6Xhi972jh76ZjVG9QChPhOBwaA5rU0A9GkksrPPYJj3rSrmx8SB4X1ARiUrfB8AcnV8FpGgDFUmhdXBoWiBjf51LoUdx18eFj2MmcqB46wtLffJZvplnBR4fgWYdOazgGxnVYrdXTMZ4K2ztTgHVwOIjv+1HrtejdHu9tKzHMSi4Q9tGlyBiNHvDkkA6DhQQ7EDHIxC6o8ajWOMiAA)

### Intermediate/Advanced Challenge 

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 

```diff
- const check = (data: Competitor[]) => {
+ const check = <Type extends Competitor> (data: Type[]) => {
      return data.map(competitor => {
          if (competitor.weight > 2121.5) throw new Error("Stop the show, world record hit!")
          return { ...competitor, judge: (...args: unknown[]) => { } }
      })
  }
```

This is testing a few different things:
 
- Writing generics with an arrow function
- Using an `extends` constraint for the interface subtypes
- Re-using the type parameter inside the array

We left a tricky problem with this challenge, but explicitly didn't call it out. The function `judge:  (...args: unknown[])` is a types gap. There is no validating that the judge function actually works like expected. There are two approaches for handling this:

```diff
- return { ...competitor, judge: (...args: unknown[]) => { } }
+ return { ...competitor, judge: (...args: Array<T[keyof T]>) => { } }
```

This version [from @faridz974](https://twitter.com/faridz974/status/1454107977267417089) 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 `string` and `number`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](https://github.com/Microsoft/TypeScript/issues/13298#issuecomment-707369176) which is a bit too long to print in here, but here's a [working implementation in the playground](https://www.typescriptlang.org/play?#code/PTAEE0HsFcHICcCmoCWA7UBjAFgQ3gObKQBmo80aa6BoADtALZ0DW65uALjVpM4t26Q0AZwA0oAJ4xQeAG6IAUCFC5QJRAHdQnSOUqq0AEykxYC0ACtoIzqAKQ7nbMhEoAXskx86AlEIxNSHg2NAIAOkVFdE5EeBJcTGQAYR8-XXhQAG9FUDzQYAAqQtAASQwAGwAjEVBC4Fz8zUQUAmxOAC5QNCYquIBuRQBfKJi4hKTQAGUPRFT+QRRhUEQAD1jjWvnfQWDs0BHotFj4xOQAEURveC4UBW30pYw1jaMttN3MnPydF0ZELq2eA0YZRFQAFWwKFq3jQCngnFquAw+Cq-hu8EkoEgVUsV04AFosZxJL5UMc9GpONA6BVEOFQMowO1OHQRB0QAR-NhoFVwt5GMAALIoTDwSAiUicYDg0mIKZilB0aXQkTQRAiYAARgAzAAmACcAA4AMSq9UC-7HAkAdgADDadQA2A1am1OsFgKDQUCMVrtVQiFigTTYLFGSAanSWSwkOQobqOchXPhWkw2HjOaHk+jiozQTABAD8ntAkOQ4ugbXs0Ls2ecXF+yAA+sEjHFm9iyM5kNTachs2gkwRoPhkbFECYqliqo5sEzQAApXByXAK4HKwwmZw2VQVSWgadluXrpWdKIkskANVwFXV4JpdIAPAB5CTglbrRCbUAsRDSMgX1AABeX9-1IUAXwAPhA0AAApGjyBCfh+ZCUPQj8Xm-N5DEkRD0IIot4M6MsAEoQJg8F8IIlCujQRB4Wo-JyKwn90A0TIAFUmPQoi4M4z9XiRNA8Jomi+OgLpOPI4CYORUSxPQuiGLiHiUJYr8fzguQunYuJQCvGS5JEtTxIM0yCOUxjFLyKzVJ+DShPg5sunkozyQ40AAHU1KIgBtcJApvO9EAfftXwkABRVZMDvdsn3BCQvKgqCJBfPzos4G5CyfLyJD-ADIKggBdYq1K6PyytIwYolhWwsBcTBg1Ap9kkE7D3gWfxgiguCjC4XAumSSr3O+fIkGpeAMH6zhcHCRhcDoOCBR2brMlk7I1JQMhlo+Nbwmaf07BgvUtVO8IAFZyOccVtHo7RIvgcV4DggAiKZdDoJtQBEbBIE0CQgngCoTCQa4TChTgAEJXtItSJugKb9kC-k9oyCRrCMIgujglH8AIdkDNve9H0QVqoNGg4DnwoY4cOOq7DcTwHk+WpQL8rIQxaNoSNOg0DgkTnDp5rozrtAX9mF9pRZ1d0JaF7npdAPUdQOMqGdAdtrlue40eCNnQA5pt-i6V7GEgeMNVewHFZIp1VaGQXjYBUBXroYIstwfxra5o6ugAFn9tXS3LH7Zl4LqAhDYIWFqAgkC4WrhHqpm5jRp5YJwK4WDg1OWbWkQ4ZUfIAD0Szz9PhHCEhgkixJsF2yO9g2sa8hW9JgnCTGiEb1aMgO226bhhdQ614Ida8SuMGhNBYDsOhcBENwwm+y9EAJLOmt+GA2iT0Q7DHm5uF1yOM9Azec8Pif84yQuF1LktFCv4+09Pqua-gOucF7jv1pg1uI5907t3RAP9PgDyOhIdu4Cez-AkHaIeiggA). 
 
[Our answer](https://www.typescriptlang.org/play?&q=2#code/PTAEE0HsFcHICcCmoCWA7UBjAFgQ3gObKQBmo80aa6BoADtALZ0DW65uALjVpM4t26Q0AZwA0oAJ4xQeAG6IAUCFC5QJRAHdQnSOUqq0AEykxYC0ACtoIzqAKQ7nbMhEoAXskx86AlEIxNSHg2NAIAOkVFdE5EeBJcTGQAYR8-XXhQAG9FUDzQYAAqQtAASQwAGwAjEVBC4Fz8zUQUAmxOAC5QNCYquIBuRQBfKJi4hKTQAGUPRFT+QRRhUEQAD1jjWvnfQWDs0BHotFj4xOQAEURveC4UBW30pYw1jaMttN3MnPydF0ZELq2eA0YZRFRQaCZbxGZBBEK1AhILigTQuDDSaAouLENAVSSyXDGCo8bwLfxPETKMC4KowJwuUBuTygUiqehMVjsKrQOyoxDomS2fCxEy6AlEry4ESIWrElhKFTOZAw663Zaknbk4S1AC0pkxJBgxl+yOcyIxoCMKCMaFgdnkyCpv2QNJQxM4+LFiSSIlqIj4xDISpW6xu6hQiAqb3URpMy2DTsuqu49w+WrQAEJQMlCfqQ69naAAAY4K4sIvqSiYAKgPoVSCaJ1ipCMSAWYMat1xFbweB7OsNgD8oCi3lEdlLmBYoAAvKAADwAFUkvnz-OjD0+AD5QAAKIxcXBdZe+ADaAF0AJSznfffJITiQjAHzi4cKMXB0Xca9J7Ge3xofjyFAyG-NMMnCZpWnaUAdwAJgARkQ8IAFZr2cPttDQLRQAAUV7YJdwAIimXQ6ELERsAbCQ4SjcgrmCExsH8DMiMvQCgIfJ99nCXif0+CRrCMIgul3XjwnwAgRC6SgWDQBs0Ava9-32IYDg4oZ2MOMdbEZWZN38YJajnU8sixaDOlARCAE4DgkMyoLaSykIABjs-ZHPaLoEIAZgAdgANnchyWicro4J8g5z0UHS7BVYJblTMkMmM0BTOdf4uiI1s5AjEQiJo0KvNAALIqGeyMoBUAiLoYJOBufwCvMsLQAAFlaqKwTARcGSZLxwKeFFghYBEkU4UdtTsPqDJrOdJxYXdpvAoz2JUfIAD1B0UJbkqecJDXgXDEmwMDkr-ACfn4wz4HCISiFOzUIM8zgtPYp0euVBibhTfrduWFARFtOw6ClNwwkLD1fB1ebfhgNoJvHS0vsSuYBuWOaXCnfdkZ+maVqdDatsUeLvruVG-rQfbgiOnAHt-TIVLvPIrogu7EDpz5IKKzgJBZ4JwiVf5XsUIA).


## The Challenge

### Beginner/Learner Challenge

[Update your website's color scheme for Halloween and tidy the codebase up a bit](https://www.typescriptlang.org/play?#gist/927ccc66ae3022dc64c4f650109b937a-17).


### Intermediate/Advanced Challenge  

[Handle a book stores halloween discount event](https://www.typescriptlang.org/play?#gist/927ccc66ae3022dc64c4f650109b937a-18)

## 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 :)