DEV Community: Gabrielle Crevecoeur

Type | Treat The Finale

Gabrielle Crevecoeur — Sat, 31 Oct 2020 18:50:09 +0000

Thank you so much for participating in TypeScript's Type | Treat coding challenges! Unfortunately, we have come to the end of our spooky journey but no worries, there will be more challenges to come in the future!

Beginner/Learner Challenges

Intermediate/Advanced Challenges

Yesterday's Solution

Beginner/Learner Challenge

Like many challenges, you answer to this depends on how thorough you wanted to type the houses.
The in-challenge text tries to guide you to answer with a single generic type which passes the first argument to both trickOrTreat and restock.

type House<Candy> = {
  doorNumber: number
  trickOrTreat(): Candy;
  restock(items: Candy): void;
}

type FirstHouse = House<"book" | "candy">

type SecondHouse = House<"toothbrush" | "mints">

// ... same pattern for the rest

This could be enough, and that's totally enough type safety for cases like this. This does lose the doorNumber being exact though. So, here are two different routes to give the doorNumber to each house:

// Via a 2nd generic argument
type House<DoorNumber, Candy> = {
  doorNumber: DoorNumber
  trickOrTreat(): Candy;
  restock(items: Candy): void;
}

type FirstHouse = House<1, "book" | "candy">

type SecondHouse = House<2, "toothbrush" | "mints">

// ... same pattern for the rest

and

type House<Candy> = {
  doorNumber: number
  trickOrTreat(): Candy;
  restock(items: Candy): void;
}

// Via intersection types:
type FirstHouse = House<"book" | "candy"> & { doorNumber: 1 }

type SecondHouse = House<"toothbrush" | "mints"> & { doorNumber: 2 }

Our answer.

Intermediate/Advanced Challenge

OK, this one is tricky. It's based on this Playground example.

We started out by making types for passing the data around

type Movies = typeof moviesToShow
type Movie = { forKids: boolean }

// Template strings literals to describe each task
type Get<T extends string> = `getVHSFor${capitalize T}`
type MakePopcorn<T extends string> = `makePopcornFor${capitalize T}`
type Play<T extends string> = `play${capitalize T }`

// A union of the above literal types
type Tasks<T extends string> = Get<T> | MakePopcorn<T> | Play<T>

These gave us a set of primitives which could work together to create this whopper:

type MakeScheduler<Type> = {
  [Field in keyof Type as Tasks<Field extends string ? Field : never>]: () => void;
};

This type uses the new as syntax for mapped types in TypeScript 4.1 to essentially map each field (Field) from the keys in the input type (Type) to the union Tasks above. This means that each field is converted into three templated literals:

input: `"halloween"` turns to:
  ├─ Get<"halloween"> -> `getVHSForHalloween`
  ├─ MakePopcorn<"halloween"> -> `makePopcornForHalloween`
  └─ Play<"halloween"> -> `playHalloween`

Which is declared to be a function which returns void.

This type is then used as the return type for the makeScheduler function:

function makeScheduler(movies: Movies): MakeScheduler<Movies> {

For simplicities sake, we skipped typing the inside of the function - though the folks who did that, good work!

The second part added one simple constraint, but one that requires some work to get right. We wanted to take into account whether a movie was for kids of not inside the type system.

Our answer for this was to recreate the scheduler function above, and to add the logic for removing those types during the type mapping process.

type MakeKidsScheduler<Type> = {
  [Field in keyof Type as Tasks<Field extends string ? Field : never>]:
    Type[Field] extends { forKids: true } ?  () => void : never;
};

Instead of returning a () => void, we inserted a conditional type in the return position which first checked if forKids is true in the original type. If it was, then it returned the function - otherwise it returned never. Returning never here would mean that the function would not exist - removing them from the mapping process.

The community came up with quite a few alternative takes which provided type safety inside the functions and used different routes like removing the non-kids movie keys ahead of time.

Our answer

Share Your Experience

We would love to hear your feedback on this weeks challenges whether good or a bad! If you can please take our quick 4 question survey that can be found here

Want More?!

If you want to learn more about TypeScript, check out some of our best resources:

Happy Typing :)

Type | Treat Challenge 5

Gabrielle Crevecoeur — Fri, 30 Oct 2020 21:06:05 +0000

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

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

Type | Treat Challenge 4

Gabrielle Crevecoeur — Thu, 29 Oct 2020 20:27:38 +0000

Type | Treat Challenge 4

Welcome to the fourth Type | Treat challenge! Today we will be stopping hauntings and putting puppies in their place.

Yesterday's Solution

Beginner/Learner Challenge

We were looking for some pretty simple types in this challenge:

type Treat = { 
  location: string
  result: "treat",
  treat: { candy: string, baked?: string } 
}

type Trick = {
  location: string
  result: "trick",
  trick: string
}

type NoShow = {
  location: string
 result: "no-show"
}

We can safely and efficiently reuse the properties in each field by extending them with an interface.

type House = {
  location: string
  result: "treat" | "trick" | "no-show"
}

interface Treat extends House { treat: { candy: string, baked?: string } }
interface Trick extends House  { trick: string }
interface NoShow extends House { trick: string }

We can specialize each result property with the specific value a Trick, Treat, or NoShow will hold by re-declaring it.

interface Treat extends House { result: "treat", treat: { candy: string, baked?: string } }
interface Trick extends House { result: "trick", trick: string }
interface NoShow extends House { result: "no-show" }

Which would give the exact string value for result in each type.

Our answer.

Intermediate/Advanced Challenge

This one either stumped people for ten minutes or was considered a breeze. We had a few different answers in the TypeScript team, but we think this one is the most elegant.

type Result = {
    done: boolean,
    who: string,
    loot: Record<string, any>
}

type TrunkOrTreatResults = Record<typeof trunkOrTreatSpots[number], Result>

This challenge was a great reminder that a Record is simply a type-alias to a conditional type:

type Record<K extends string | number | symbol, T> = { [P in K]: T; }

Which can convert the original answer:

type Result = {
    done: boolean,
    who: string,
    loot: Record<string, any>
}

type ResultMapper<P extends readonly string[]> = {
    [K in P[number]]: Result
};

type TrunkOrTreatResults = ResultMapper<typeof trunkOrTreatSpots>;

into code which is both easier to read, and requires knowing less language concepts. Kudos to the folks who made it seem very easy!

Here's our answer. Bonus: the weirdest answer.

The Challenge

Beginner/Learner Challenge

Don't freak out... Ok freak out a little bit cause WE ARE BEING HAUNTED! And they are after our code! We have tried everything but we cant seem to get it right!

Somehow they keep manipulating the objects set this snippet of code. Take a look and see if you can force the ghosts to stop moving things around.

Intermediate/Advanced Challenge

You've been roped into helping out the halloween puppy parade, it was such a distracting even that you did the minimum possible to spend as much time watching the show.

Now it's over, you figure it's time to clean up your code and try get it type-safe.

Submissions

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

Type | Treat Challenge 3

Gabrielle Crevecoeur — Wed, 28 Oct 2020 20:00:36 +0000

Welcome to the third Type | Treat challenge! Today we will be going over yesterday's answers and diving into some new problems to solve.

Yesterday's Solution

Beginner/Learner Challenge

The typeof operator is one of those small tools which helps you avoid duplication, if you already have the type in the runtime - why not re-use it?

- type Pumpkin = any
+ type Pumpkin = typeof pumpkin

- type PumpkinFromFunction = any
+ type PumpkinFromFunction = ReturnType<typeof Pumpkin>

Intermediate/Advanced Challenge

This one is a tricky one. Made a bit harder by an accident of not including every ghost in the Ghosts type.

The challenge aimed give a subtle nod to day 1's question, where the rest of the challenge becomes easier if you first make a set of types via conditionals or Extract.

type Gods = Extract<Ghosts, { god: true }>;
type Demons = Extract<Ghosts, { demon: true }>;
type EctoPlasmics = Extract<Ghosts, { ectoplasmic: true }>;

This does actually work in the current challenge, even though it's not quite right. From there, you can create user-defined type guards to change the code flow in the main algorithm to work as expected.

function areGods(ghosts: Ghosts[]): ghosts is Gods[] {
  return ghosts.every(ghost => "god" in ghost);
}

function areDemons(ghosts: Ghosts[]): ghosts is Demons[] {
  return ghosts.every(ghost => "demon" in ghost);
}

function areEctoPlasmic(ghosts: Ghosts[]): ghosts is EctoPlasmics[] {
  return ghosts.every(ghost => "ectoplasmic" in ghost);
}

That said, let's try work within the constraint of 'maybe the TypeScript team know what they are doing, and this challenge is meant to be this way?!' - which is kinda provably false from this challenge.

In the TypeScript structural type system, you don't really need to know much more than is required, and you could safely create a singular type for God, Demon and EctoPlasmics, then declare an array of those types:

type God = Ghosts & { god: true };
type Demon = Ghosts & { demon: true, sendBackToHell(): void };
type EctoPlasmic = Ghosts &  { ectoplasmic: true };

function areGods(ghosts: Ghosts[]): ghosts is God[] {
  return ghosts.every(ghost => "god" in ghost);
}

function areEctoPlasmic(ghosts: Ghosts[]): ghosts is EctoPlasmic[] {
  return ghosts.every(ghost => "ectoplasmic" in ghost);
}

function areDemons(ghosts: Ghosts[]): ghosts is Demon[] {
  return ghosts.every(ghost => "demon" in ghost);
}

That type-safety is enough for the algorithm, but could bite you later on because Ghosts & [x] makes any other property optional.
If you are going for minimalism, here's a terse answer in 3 one-liners which takes into account usage inside the algorithm:

const areDemons = (ghosts: Ghosts[]): ghosts is Extract<Ghosts, { demon: true }>[] => ghosts.every(ghost => "demon" in ghost);
const areEctoPlasmic = (ghosts: Ghosts[]): ghosts is Extract<Ghosts, { ectoplasmic: true }>[] => ghosts.every(ghost => "ectoplasmic" in ghost);
const areGods = (ghosts: Ghosts[]): boolean => ghosts.every(ghost => "god" in ghost);

@igorbek managed to get it to two lines!

The Challenge

Beginner/Learner Challenge

You've been keeping tally of how the houses on your street respond to trick-or-treaters. Can you reduce duplication from the types needed to describe the results?

Help out here

Intermediate/Advanced Challenge

You have a list of trunk or treat spots, in your rush you hardcoded the result of your map function to convert it from an array to an object.
Now the list is longer than three items, it's time to map that hardcoded result into a type. Can you refactor this TODO list function?

Refactor

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

Type | Treat Challenge 2

Gabrielle Crevecoeur — Tue, 27 Oct 2020 22:56:59 +0000

Welcome to the second Type | Treat challenge! Today we will be deriving the types of pumpkins and busting ghosts!

Yesterday's Solution

Beginner/Learner Challenge

The solution for this challenge used indexed types to extract a part of an existing type to avoid duplication. The need to use [number] is an interesting twist, because [0] or [1] (or any number) would have worked just as well too. Doing this right would also have raised the typo in the original code.

// Your goal: remove this any, without changing GhostAPIResponse
- const displayHauntings = (haunting: any) => {
+ const displayHauntings = (haunting: GhostAPIResponse["hauntings"][number]) => {
  console.log(` - Title: ${haunting.title}`)

Link

Intermediate/Advanced Challenge

// You're first going to need to separate out the candy from the treats,
// you can do that via conditional types.

- // type AllCandies = ...
+ type IsCandy<A> = A extends { candy: true } ? A : never;
+ type AllCandies = IsCandy<ResultsFromHalloween>

- // type AllTricks = ...
+ type IsTrick<A> = A extends { trick: true } ? A : never;
+ type AllTricks = IsTrick<ResultsFromHalloween>

// Almost there, but little 'Bobby Tables' cannot have peanuts. Can
// you make a list of candies just for him?

- // type AllCandiesWithoutPeanuts = ...
type HasPeanuts<A> = A extends { peanuts: true } ? A : never;
type AllCandiesWithoutPeanuts = HasPeanuts<AllCandies>

Our original answer relied on using Conditional Types to narrow the union, however we got a lot of responses using the Exclude utility type to make it a single liner:

type AllCandies = Exclude<ResultsFromHalloween, { candy: true }>

Which is a great solution. Full link

The Challenge

Beginner/Learner Challenge

Lets take a trip to the pumpkin patch and try to find the perfect one for our Jack O'Lantern. But in order to make sure we have located the right type of pumpkin, we need your help in identifying pumpkin types.

We created some starter code you can find here, lets see if you can finish it.

Intermediate/Advanced Challenge

Your job busting ghosts just got real tricky. Before you head in to guard Manhattan, you need to assert to those ghosts who is boss. Help finalize the ghost-busting algorithm because who else are you gonna call?

Sharing

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

Type | Treat Challenge 1

Gabrielle Crevecoeur — Mon, 26 Oct 2020 18:09:01 +0000

Welcome to the first Type | Treat challenge! Today we will be extracting haunting data from ghosts and sorting Halloween candy!

The Challenge

Beginner/Learner Challenge

So the TypeScript team is being hired to investigate recent hauntings in the community, and we are trying to figure which ghost is the trouble-maker!

We found an API that will allow us to get data on the ghosts however, out code isn't fully optimized. So we need your help.

Head to this link and help us figure out the best type to use in one of our function parameters!

Intermediate/Advanced Challenge

Your kids have come back from trick or treating with a lot of loot. Someone's going to have to sort this pile, and it looks like that job has fallen to you. Can you conditionally filter the pile into manageable lists?

Head over to start sorting.

Share Your Code

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

Next go to Twitter, and create a tweet about the challenge, add the paste 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!
Beginners may want to check out this page from the TypeScript Handbook

Happy Typing :)

The TypeScript Team Presents `Type | Treat`

Gabrielle Crevecoeur — Sun, 25 Oct 2020 20:59:26 +0000

Tomorrow October 26th, you will be able to participate in TypeScript's first ever set of virtual code challenges: Type | Treat (or "Type or Treat")! We will be presenting some "spooky" code challenges that will allow you to get deeper into the TypeScript language but in a fun way.

Starting tomorrow, a new code challenge will be posted every weekday, along with its solution the day after. The last solution will be posted on Halloween day.

You can look forward to the challenges being posted at 4 PM EST. All information will be posted right here on our Dev.to channel, so be sure to follow!

Are The Challenges For TypeScript Developers Only?

Absolutely not! We want all developers, familiar with TypeScript or not to be apart of Type | Treat. Every day will have two different types of challenges, one for beginners/learners and one for intermediate/advanced developers. That way everyone can participate.

How To Participate

In order to participate you will need to have a twitter account and be sure that you can access this channel, along with the TypeScript website.

As mentioned earlier, you will want to start here to find the details on the code challenge of the day. Each challenge will contain a link to the starter code, that will be held in the TypeScript playground. Via the playground you can work on the challenge in the browser and you will be able to test your code to see if it properly passes the challenge

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.

You will then need to 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.

Best Resources for Additional Help

If you need additional help you can utilize the following:

The TypeScript Handbook
TypeScript Discord Room
The comments on each Dev.to post!