{"id":3163,"date":"2021-10-27T12:48:52","date_gmt":"2021-10-27T20:48:52","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/typescript\/?p=3163"},"modified":"2023-04-27T13:11:28","modified_gmt":"2023-04-27T21:11:28","slug":"type-treat-2021-day-3","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/type-treat-2021-day-3\/","title":{"rendered":"Type | Treat 2021 \u2013 Day 3"},"content":{"rendered":"

Type | Treat Challenge 3<\/h2>\n

Welcome to the third Type | Treat<\/code> 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<\/a> and have 2 new challenges.<\/p>\n

Yesterday’s Solution<\/h2>\n

Beginner\/Learner Challenge<\/h3>\n

There is many ways to decide how to type existing data, you could use literal types<\/a> when you’re sure of the exact formats – or be more liberal and use string<\/code> when you expect a variety. We opted for literals, but using string<\/code> is totally cool too.<\/p>\n

\n
type<\/span> UnderripePumpkin<\/span> =<\/span> {<\/span>\r\n    color<\/span>: \"green\"<\/span>,<\/span>\r\n    soundWhenHit<\/span>: \"dull thud\"<\/span>\r\n}<\/span>\r\ntype<\/span> RipePumpkin<\/span> =<\/span> {<\/span>\r\n    color<\/span>: \"purple\"<\/span> |<\/span> \"orange\"<\/span> |<\/span> \"blue\"<\/span>,<\/span>\r\n    soundWhenHit<\/span>: \"echo-y\"<\/span>\r\n}<\/span>\r\ntype<\/span> OverripePumpkin<\/span> =<\/span> {<\/span>\r\n    color<\/span>: \"green\"<\/span> |<\/span> \"white\"<\/span>,<\/span>\r\n    soundWhenHit<\/span>: \"squishy\"<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
The second part of the challenge used type predicates (or type guards)<\/a> annotates a function which returns a booleon<\/code> with narrowing information about the paramters. This means we can tell TypeScript that when the return values to isRipe<\/code>is true, then the argument pumpkin<\/code> is of the type RipePumpkin<\/code>:<\/p>\n
\n
-<\/span> function isRipe(pumpkin: any) {<\/span>\r\n+<\/span> function isRipe(pumpkin: any): pumpkin is RipePumpkin {<\/span>\r\n       return \"soundWhenHit\" in pumpkin && pumpkin.soundWhenHit === \"echo-y\"\r\n  }<\/pre>\n<\/div>\n
Successfully completing this challenge would have no errors.<\/p>\n
Our answer<\/a>.<\/p>\n
Intermediate\/Advanced Challenge<\/h3>\n
This challenge was first about understanding different read vs write properties available in both classes<\/code> and interface<\/code>\/typed<\/code> objects. Personally, I’ve seen this with document.location<\/code> 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<\/code> which for me is generally a ‘throw it all in and see what happens’ style of drink.<\/p>\n
\n
class<\/span> PunchMixer<\/span> {<\/span>\r\n  #punch<\/span>: Punch<\/span> =<\/span> {<\/span>flavour<\/span>: ''<\/span>,<\/span> ingredients<\/span>: [<\/span>]<\/span>}<\/span>;<\/span>\r\n\r\n  public<\/span> get<\/span> punch<\/span>(<\/span>)<\/span>: Punch<\/span> {<\/span>\r\n      return<\/span> this<\/span>.<\/span>#punch<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  public<\/span> set<\/span> punch<\/span>(<\/span>punch<\/span>: Punch<\/span> |<\/span> Punch<\/span>[<\/span>'ingredients'<\/span>]<\/span>[<\/span>number<\/span>]<\/span>)<\/span> {<\/span>\r\n      if<\/span> (<\/span>typeof<\/span> punch<\/span> ===<\/span> 'string'<\/span>)<\/span> {<\/span>\r\n          this<\/span>.<\/span>#punch<\/span>.<\/span>ingredients<\/span>.<\/span>push<\/span>(<\/span>punch<\/span>)<\/span>;<\/span>\r\n      }<\/span> else<\/span> if<\/span> (<\/span>'flavour'<\/span> in<\/span> punch<\/span>)<\/span> {<\/span>\r\n          this<\/span>.<\/span>#punch<\/span> =<\/span> punch<\/span>;<\/span>\r\n      }<\/span> else<\/span> {<\/span>\r\n          this<\/span>.<\/span>#punch<\/span>.<\/span>ingredients<\/span>.<\/span>push<\/span>(<\/span>punch<\/span>)<\/span>;<\/span>\r\n      }<\/span>\r\n  }<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
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.<\/p>\n
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<\/code> function was.<\/p>\n
\n
-<\/span> class PunchMixer {<\/span>\r\n+<\/span> class PunchMixer<MixerType> {<\/span>\r\n+<\/span>    mixer!: MixerType;<\/span>\r\n\r\n  \/\/ ...\r\n+<\/span>   public vend(): MixerType {<\/span>\r\n+<\/span>        return this.mixer;<\/span>\r\n+<\/span>    }<\/span>\r\n  }<\/pre>\n<\/div>\n
We were not too worried about how you passed back the MixerType<\/code> – our first draft had return {} as MixerType<\/code> but a private field feels nicer.<\/p>\n
Our Answer<\/a>.<\/p>\n
The Challenge<\/h2>\n
Beginner\/Learner Challenge<\/h3>\n
Figure out how to stop people giving you bad strings for your custom lengths.<\/a><\/p>\n
Intermediate\/Advanced Challenge<\/h3>\n
Stop losing your literals in Halloween posters<\/a><\/p>\n
How To Share Your Solution<\/h2>\n
Once you feel you have completed the challenge, you will need to select the Share<\/strong> button in the playground. This will automatically copy a playground URL to your clipboard.<\/p>\n
Then either:<\/p>\n