{"id":3168,"date":"2021-10-28T11:22:01","date_gmt":"2021-10-28T19:22:01","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/typescript\/?p=3168"},"modified":"2023-04-27T13:18:08","modified_gmt":"2023-04-27T21:18:08","slug":"type-treat-2021-day-4","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/typescript\/type-treat-2021-day-4\/","title":{"rendered":"Type | Treat 2021 \u2013 Day 4"},"content":{"rendered":"

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

Welcome to the fourth 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 four, 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

I wonder if we over-indexed on the difficulty here, and we’re interested if you dropped off somewhere through this task because we had less submissions than usual for this challenge. The goal was to have you build out a template string literal<\/a> type which accounted for string input which roughly<\/em> matched how CSS’s stringy variables worked.<\/p>\n

You started with:<\/p>\n

\n
type<\/span> Length<\/span> =<\/span> string<\/span><\/pre>\n<\/div>\n
Which accepts all possible strings, next we show some examples which should always fail. The key one here being that an empty string should fail: \"\"<\/code>. Next we provided some valid input for you to work with:<\/p>\n
\n
type<\/span> Length<\/span> =<\/span> `${<\/span>number<\/span>}<\/span><\/span>in`<\/span>\r\n\r\n\/\/ Works with:<\/span>\r\nreq<\/span>(<\/span>\"0in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"12in\"<\/span>)<\/span><\/pre>\n<\/div>\n
Giving you a sense that a number can be used in the template slot – which allows for all sorts of possibilities.<\/p>\n
Next we gave samples with different prefixes, so \"in\"<\/code> and \"cm\"<\/code> would need to be handled. To get that right, you would need to use a union:<\/p>\n
\n
type<\/span> Unit<\/span> =<\/span> \"cm\"<\/span> |<\/span> \"in\"<\/span>\r\ntype<\/span> Length<\/span> =<\/span> `${<\/span>number<\/span>}<\/span><\/span>${<\/span>Unit<\/span>}<\/span><\/span>`<\/span>\r\n\r\n\/\/ Works with:<\/span>\r\nreq<\/span>(<\/span>\"0in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"12in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"1.5cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"20cm\"<\/span>)<\/span><\/pre>\n<\/div>\n
Next we threw a curve ball – \"0\"<\/code> should also be acceptable, this is a bit of a curve ball, but also it’s a bit of a trick:<\/p>\n
\n
type<\/span> Unit<\/span> =<\/span> \"cm\"<\/span> |<\/span> \"in\"<\/span> |<\/span> \"\"<\/span>\r\ntype<\/span> Length<\/span> =<\/span> `${<\/span>number<\/span>}<\/span><\/span>${<\/span>Unit<\/span>}<\/span><\/span>`<\/span>\r\n\r\n\/\/ Works with:<\/span>\r\nreq<\/span>(<\/span>\"0in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"12in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"1.5cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"20cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"0\"<\/span>)<\/span><\/pre>\n<\/div>\n
The lack of a unit is just an empty string unit! Only one more thing now, and that is allowing a space inbetween the number and unit. This could be done via another type also:<\/p>\n
\n
type<\/span> Unit<\/span> =<\/span> \"cm\"<\/span> |<\/span> \"in\"<\/span> |<\/span> \"\"<\/span>\r\ntype<\/span> Space<\/span> =<\/span> \" \"<\/span> |<\/span> \"\"<\/span>\r\ntype<\/span> Length<\/span> =<\/span> `${<\/span>number<\/span>}<\/span><\/span>${<\/span>Space<\/span>}<\/span><\/span>${<\/span>Unit<\/span>}<\/span><\/span>`<\/span>\r\n\r\n\/\/ Works with:<\/span>\r\nreq<\/span>(<\/span>\"0in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"12in\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"1.5cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"20cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"0\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"12 cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"14 in\"<\/span>)<\/span><\/pre>\n<\/div>\n
That was is for the easy parts of the challenge. It’s pretty tricky, because it requires that you understand that number<\/code> can be anything in the template string and to understand how a union can allow for different types of strings inside the type. That’s all in the main docs, but it could be a lot of ideas to learn at once.<\/p>\n
This challenge also had a set of complications, cases where the version of the the Length<\/code> type we expected people to build would provide interesting edge cases:<\/p>\n
\n
req<\/span>(<\/span>`${<\/span>0.3e21<\/span>}<\/span><\/span>cm`<\/span>)<\/span>\r\nreq<\/span>(<\/span>\"-12 cm\"<\/span>)<\/span>\r\nreq<\/span>(<\/span>`${<\/span>Infinity<\/span>}<\/span><\/span>cm`<\/span>)<\/span>\r\nreq<\/span>(<\/span>`${<\/span>NaN<\/span>}<\/span><\/span>cm`<\/span>)<\/span><\/pre>\n<\/div>\n
\nClick to learn about these cases<\/b><\/summary>\n
\n
req<\/span>(<\/span>`${<\/span>0.3e21<\/span>}<\/span><\/span>cm`<\/span>)<\/span><\/pre>\n<\/div>\n
Acted as a potential clue to an alternative answer for these failing cases:<\/p>\n
\n
req<\/span>(<\/span>`${<\/span>Infinity<\/span>}<\/span><\/span>cm`<\/span>)<\/span>\r\nreq<\/span>(<\/span>`${<\/span>NaN<\/span>}<\/span><\/span>cm`<\/span>)<\/span><\/pre>\n<\/div>\n
Because number<\/code> can be switched out with bigint<\/code> in the type of Length<\/code>:<\/p>\n
\n
-<\/span> type Length = `${number}${Space}${Unit}`<\/span>\r\n+<\/span> type Length = `${bigint}${Space}${Unit}`<\/span><\/pre>\n<\/div>\n
This meant you couldn’t pass in Infinity<\/code> or NaN<\/code> but also broke req(\"1.5cm\")<\/code> because you can’t have point values. This could be fixed via:<\/p>\n
\n
type<\/span> Length<\/span> =<\/span> `${<\/span>bigint<\/span>}<\/span><\/span>${<\/span>Space<\/span>}<\/span><\/span>${<\/span>Unit<\/span>}<\/span><\/span>`<\/span> |<\/span> `${<\/span>bigint<\/span>}<\/span><\/span>.${<\/span>bigint<\/span>}<\/span><\/span>${<\/span>Space<\/span>}<\/span><\/span>${<\/span>Unit<\/span>}<\/span><\/span>`<\/span><\/pre>\n<\/div>\n
Which describes both possible cases with a “.” and without. This technique still doesn’t handle the req(\"-12 cm\")<\/code>, and actually, it introduces a whole new problem: req(\"-12.-12cm\")<\/code> is allowed!<\/p>\n
We spotted a good answer from @danvdk<\/a> which revolved around using string manipulation instead, by introducing a Digit<\/code> type:<\/p>\n
\n
type<\/span> Whitespace<\/span> =<\/span> ''<\/span> |<\/span> ' '<\/span>;<\/span>\r\ntype<\/span> Unit<\/span> =<\/span> 'in'<\/span> |<\/span> 'cm'<\/span>;<\/span>\r\ntype<\/span> Digit<\/span> =<\/span> '0'<\/span> |<\/span> '1'<\/span> |<\/span> '2'<\/span> |<\/span> '3'<\/span> |<\/span> '4'<\/span> |<\/span> '5'<\/span> |<\/span> '6'<\/span> |<\/span> '7'<\/span> |<\/span> '8'<\/span> |<\/span> '9'<\/span>;<\/span>\r\ntype<\/span> Length<\/span> =<\/span> `${<\/span>Digit<\/span>}<\/span><\/span>${<\/span>number<\/span> |<\/span> ''<\/span>}<\/span><\/span>${<\/span>Whitespace<\/span>}<\/span><\/span>${<\/span>Unit<\/span>}<\/span><\/span>`<\/span> |<\/span> '0'<\/span>;<\/span><\/pre>\n<\/div>\n
This solution correctly handles the case of req(\"-12 cm\")<\/code> but via that number<\/code> would allow something like req(\"1-22 cm\")<\/code> – which you can pretend is to handle an input range. It wouldn’t be hard to take this solution and reasonably cover additional edge cases. Very cool solution.<\/p>\n<\/details>\n
Our answer<\/a><\/p>\n
Intermediate\/Advanced Challenge<\/h3>\n
The intermediate challenge was on type literals mixed with generics functions. The challenge started with this function:<\/p>\n
\n
function<\/span> makeTitle<\/span>(<\/span>str<\/span>: string<\/span>)<\/span> {<\/span>\r\n    return<\/span> \"<spooky>\"<\/span> +<\/span> str<\/span>.<\/span>toUpperCase<\/span>(<\/span>)<\/span> +<\/span> \"<\/spooky>\"<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
The goal was to keep track of string literals through this function. To do this, you need to switch the str: string<\/code> to be a type argument:<\/p>\n
\n
function<\/span> makeTitle<\/span><<\/span>Str<\/span>><\/span>(<\/span>str<\/span>: Str<\/span>)<\/span> {<\/span>\r\n    return<\/span> \"<spooky>\"<\/span> +<\/span> str<\/span>.<\/span>toUpperCase<\/span>(<\/span>)<\/span> +<\/span> \"<\/spooky>\"<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
You know that the type argument has to be a string, which you can tell TypeScript via <Str extends string><\/code>, then you can re-use the Str<\/code> in the return position:<\/p>\n
\n
function<\/span> makeTitle<\/span><<\/span>Str<\/span> extends<\/span> string<\/span>><\/span>(<\/span>str<\/span>: Str<\/span>)<\/span>: `<<\/span>spooky<\/span>><\/span>${Uppercase<\/span><<\/span>Str<\/span>><\/span>}<\/span><<\/span>\/<\/span>spooky<\/span>><\/span>` {<\/span>\r\n    return<\/span> \"<spooky>\"<\/span> +<\/span> str<\/span>.<\/span>toUpperCase<\/span>(<\/span>)<\/span> +<\/span> \"<\/spooky>\"<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
You’d think this would be it, but str.toUpperCase<\/code> actually converts the str<\/code> to a string! Tricky, you’d need to think creatively here and you have three options:<\/p>\n
    \n
  1. Use an as<\/code> because you know better than the compiler:\n
    \n
    function<\/span> makeTitle<\/span><<\/span>Str<\/span> extends<\/span> string<\/span>><\/span>(<\/span>str<\/span>: Str<\/span>)<\/span>: `<<\/span>spooky<\/span>><\/span>${Uppercase<\/span><<\/span>Str<\/span>><\/span>}<\/span><<\/span>\/<\/span>spooky<\/span>><\/span>` {<\/span>\r\n    const shouty = str.toUpperCase() as Uppercase<Str><\/span>\r\n    return `<\/span><<\/span>spooky<\/span>><\/span>$<\/span>{<\/span>shouty}<\/span><<\/span>\/<\/span>spooky>`\r\n}<\/span><\/pre>\n<\/div>\n<\/li>\n
  2. Override toUpperCase<\/code> to support template literals:\n
    \n
    interface<\/span> String<\/span> {<\/span>\r\n    toUpperCase<\/span><<\/span>T<\/span> extends<\/span> string<\/span>><\/span>(<\/span>this<\/span>: T<\/span>)<\/span> : Uppercase<\/span><<\/span>T<\/span>><\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/li>\n
  3. Or create a new function which supports template literals.<\/li>\n<\/ol>\n
    This would take the \"party\"<\/code> used on line 19 and convert it to \"<spooky>PARTY<\/spooky>\"<\/code>. That change would remove the compiler error on addTadaEmoji<\/code>.<\/p>\n
    The second part was about re-using the type parameters inside argument for the function. The challenge started with:<\/p>\n
    \n
    function<\/span> setupFooter<\/span>(<\/span>str<\/span>: string<\/span>)<\/span> {<\/span>\r\n    \/\/ validate string etc<\/span>\r\n    return<\/span> {<\/span> \r\n        name<\/span>: str<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>[<\/span>0<\/span>]<\/span>,<\/span>\r\n        date<\/span>: str<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>[<\/span>1<\/span>]<\/span>,<\/span>\r\n        address<\/span>: str<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>[<\/span>2<\/span>]<\/span>\r\n    }<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
    Would lose string literals passed in as str<\/code>. You knew ahead of time that there were three separate parts of information you were interested in:<\/p>\n
    \n
    function<\/span> setupFooter<\/span><<\/span>Name<\/span> extends<\/span> string<\/span>,<\/span> Date<\/span> extends<\/span> string<\/span>,<\/span> Address<\/span> extends<\/span> string<\/span>><\/span>(<\/span>str<\/span>: string<\/span>)<\/span> {<\/span><\/pre>\n<\/div>\n
    These could then be used inside the replacement for string<\/code>:<\/p>\n
    \n
    function<\/span> setupFooter<\/span><<\/span>Name<\/span> extends<\/span> string<\/span>,<\/span> Date<\/span> extends<\/span> string<\/span>,<\/span> Address<\/span> extends<\/span> string<\/span>><\/span>(<\/span>str<\/span>: `${Name<\/span>}<\/span>,<\/span>$<\/span>{<\/span>Date}<\/span>,<\/span>$<\/span>{<\/span>Address<\/span>}<\/span>`)<\/span> {<\/span><\/pre>\n<\/div>\n
    Which would correctly set up these variables for re-use later:<\/p>\n
    \n
    function<\/span> setupFooter<\/span><<\/span>Name<\/span> extends<\/span> string<\/span>,<\/span> Date<\/span> extends<\/span> string<\/span>,<\/span> Address<\/span> extends<\/span> string<\/span>><\/span>(<\/span>str<\/span>: `${Name<\/span>}<\/span>,<\/span>$<\/span>{<\/span>Date}<\/span>,<\/span>$<\/span>{<\/span>Address<\/span>}<\/span>`)<\/span> {<\/span>\r\n    \/\/ validate string etc<\/span>\r\n    return<\/span> {<\/span> \r\n        name<\/span>: str<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>[<\/span>0<\/span>]<\/span> as<\/span> Name<\/span>,<\/span>\r\n        date<\/span>: str<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>[<\/span>1<\/span>]<\/span> as<\/span> Date<\/span>,<\/span>\r\n        address<\/span>: str<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>[<\/span>2<\/span>]<\/span> as<\/span> Address<\/span>\r\n    }<\/span>\r\n}<\/span><\/pre>\n<\/div>\n
    Successfully completing this challenge would show that name<\/code>, date<\/code> and address<\/code> were not string<\/code> but the strings passed in.<\/p>\n
    Our answer<\/a>.<\/p>\n
    The Challenge<\/h2>\n
    Beginner\/Learner Challenge<\/h3>\n
    Make some candy bowls. Then make some very specific bowls<\/a>.<\/p>\n
    Intermediate\/Advanced Challenge<\/h3>\n
    Run a set of pumpkin competitions<\/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