Type | Treat Challenge 3
Welcome to the third 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 three, which means going over the answers from yesterday and have 2 new challenges.
Yesterday's Solution
Beginner/Learner Challenge
There is many ways to decide how to type existing data, you could use literal types when you're sure of the exact formats - or be more liberal and use string
when you expect a variety. We opted for literals, but using string
is totally cool too.
type UnderripePumpkin = {
color: "green",
soundWhenHit: "dull thud"
}
type RipePumpkin = {
color: "purple" | "orange" | "blue",
soundWhenHit: "echo-y"
}
type OverripePumpkin = {
color: "green" | "white",
soundWhenHit: "squishy"
}
The second part of the challenge used type predicates (or type guards) annotates a function which returns a booleon
with narrowing information about the paramters. This means we can tell TypeScript that when the return values to isRipe
is true, then the argument pumpkin
is of the type RipePumpkin
:
- function isRipe(pumpkin: any) {
+ function isRipe(pumpkin: any): pumpkin is RipePumpkin {
return "soundWhenHit" in pumpkin && pumpkin.soundWhenHit === "echo-y"
}
Successfully completing this challenge would have no errors, and the type for.
Intermediate/Advanced Challenge
This challenge was first about understanding different read vs write properties available in both classes
and interface
/typed
objects. Personally, I've seen this with document.location
a lot where you always get a rich object when you read but can write to that property with a string. We wanted a similar concept, but using punch
which for me is generally a 'throw it all in and see what happens' style of drink.
class PunchMixer {
#punch: Punch = {flavour: '', ingredients: []};
public get punch(): Punch {
return this.#punch;
}
public set punch(punch: Punch | Punch['ingredients'][number]) {
if (typeof punch === 'string') {
this.#punch.ingredients.push(punch);
} else if ('flavour' in punch) {
this.#punch = punch;
} else {
this.#punch.ingredients.push(punch);
}
}
}
This solution uses a mix of private class fields, indexed types and type narrowing to set up a local punch object which is always returned.
The next step was to make this class generic in some form so that a type parameter passed in to the class would dictate what the return value of a vend
function was.
- class PunchMixer {
+ class PunchMixer<MixerType> {
+ mixer!: MixerType;
// ...
+ public vend(): MixerType {
+ return this.mixer;
+ }
}
We were not too worried about how you passed back the MixerType
- our first draft had return {} as MixerType
but a private field feels nicer.
The Challenge
Beginner/Learner Challenge
Figure out how to stop people giving you bad strings for your custom lengths.
Intermediate/Advanced Challenge
Stop losing your literals in Halloween posters
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 dev.to post, or in this post.
Best Resources for Additional Help
If you need additional help you can utilize the following:
- The New TypeScript Handbook
- The TypeScript Community Discord
- The comments on each Dev.to post!
- Our previous
Type | Treat
2020 challenges
Happy Typing :)
Top comments (2)
Here is my solution: Intermediate
My solution: Intermediate