Type | Treat Challenge 5

Welcome to the final Type | Treat challenge! Today we will be restocking Halloween candy and identifying Halloween movies

Yesterday's Solution

Beginner/Learner Challenge

We were looking for using the Readonly utility type to force the type to not allow poltergeists to make changes to your rooms.

- type Rectory = {
+ type Rectory = Readonly<{
    rooms: Room[]
    noises: any[]
- }
+ }>

- type Room = {
+ type Room = Readonly<{
    name: string
    doors: number
    windows: number
    ghost?: any
- }
+ }>

It's worth remembering that JavaScript doesn't have immutability like this, so this really only affects the type system. You'll get a compiler error, but people can still work around that.

Our answer

Intermediate/Advanced Challenge

This challenge evolved quite naturally from the third challenge with the addition of 4.1's heading feature Template Literals.

The most elegant answer moved the return type into the object const winners which would then be inferred as the return type of tallyPopularWinners:

const breeds = ["Hound" , "Corgi" , "Pomeranian"] as const
const costumes = ["Pumpkin" , "Hot Dog" , "Bumble Bee"] as const

+ type Breed = typeof breeds[number]
+ type Costume = typeof costumes[number]
+ type BreedCostumeCombination = `${lowercase typeof breeds[number]}-${lowercase typeof costumes[number]}`

function tallyPopularWinners(_breeds: typeof breeds, _costumes: typeof costumes) {
-  const winners = {} as any
+  const winners: Record<BreedCostumeCombination, ReturnType<typeof decideWinner>> = {} as any

Our answer Also, we watched the full two hours of that video, and it's a great background video while you're working.

The Challenge

Beginner/Learner Challenge

You're in charge of restocking the houses on your street, can you find a way to reduce the duplication in your notes by generically declaring a house?

Help keep those houses DRY

Intermediate/Advanced Challenge

You're working on a horror movie night. You've skipped the types because you figured it'd be simple to work with but someone put the wrong movie in and The Nightmare Before Christmas is not a halloween movie. It's in the name. Anyway. To avoid this happening again, you figure it's time to add types to the function. Once, you got that down then you wonder if you can do the same thing for the kids schedule?

Help type the scheduler

Share

Be sure to submit your solution by using the Share button in the TypeScript playground.

Then go to Twitter, and create a tweet about the challenge, add the link to your code and mention the TypeScript page (@typescript)

Need Extra Help?

If you need additional help you can utilize the following:

• The TypeScript Handbook
• TypeScript Discord Page
• The comments on each Dev.to posts!

Happy Typing :)

Comments

[Mattias Buelens]

Looks like there might be an unintentional typo in the intermediate challenge?

movieNight.getVHSForHocusFocus()

kidsMovieNight.getVHSForHocusFocus()

These should say "HocusPocus" instead of "HocusFocus", right?

[Orta]

Heh, thanks, they were intentionally wrong - but maybe I should have made it a bit more obvious that it was supposed to be unexpected.

The F vs P look so similar, and in the original version of this code it would have crashed before this code would have evaluated. Causing a double whammy from the any.

Next time I'll make it more obvious 👍

[Rick Love]

I found a few bugs which I don't think were intentional in the intermediate day 5 problem.

Here is the intermediate problem (unanswered - just with the bug fixes - Though, it does add a bit to find these also.)

Day 5 Intermediate w/ Bug Fixes - Typescript Playground