DEV Community

Cover image for Type | Treat 2021 - Day 1
Orta for typescript

Posted on • Updated on

Type | Treat 2021 - Day 1

Type or Treat Challenges

Today we're starting up our second year of Type | Treat (or "Type or Treat".) We will be presenting some "spooky" code challenges that will allow you to dig deeper into the TypeScript language in a fun way.

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

How To Participate

In order to participate you only need to be able to access the TypeScript website. Though ideally, you share with us your answers via our dev.to blog post mirrors, here, or via Twitter to @TypeScript.

You will want to start here on the blog to find the details on the code challenges for the day. Each post contains 2 links to different challenges which run in the TypeScript playground. Via the playground, you can work on the challenge in your browser and you will be able to test your code live 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.

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:

Day 1 Challenges

Beginner/Learner Challenge

Using the new music streaming service from the TypeScript team, Typify, set up and share your halloween playlist with your friends.

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

Intermediate/Advanced Challenge

You've figured out your costume, but making it is a bit of a process. Can you figure out how to make all of the parts come together in a type-safe way?

Head over to start sorting.

Discussion (25)

Collapse
nickytonline profile image
Nick Taylor (he/him)

Hi @orta ! No biggie, but if you want, you can create a series on dev.to for the type | treat challenge. You can create a series in the editor by clicking on the cog icon at the bottom near the publish/save draft button. 😎

Add a post to a series on DEV

Collapse
orta profile image
Orta Author

Ah, I have to change my settings from markdown only to rich to see this cog! Took a while to find, will update - thanks!

Collapse
orta profile image
Orta Author

Ah, I can't seem to edit the posts and switch them into the rich edit mode - so I don't think I can switch this into a series, shame - it's a good feature

Thread Thread
nickytonline profile image
Nick Taylor (he/him)

You can add a series in the v1 editor as well. Just add a series field to the frontmatter. e.g.

---
title: test
published: true
description:  
series: type | treat
tags: 
//cover_image: https://direct_url_to_image.jpg
---

A test
Enter fullscreen mode Exit fullscreen mode
Collapse
jaycruz profile image
JayCruz

I figured out the beginner Day 1 Solution but don't fully understand how the typeof trick on the song param works.

Collapse
tusharar091 profile image
tusharar091

Basically if you don't assert array 'as const' , typescript will infer it as a string array meaning any string whether it is a song from the playlist or not will be perfectly valid. When you use "type of playlist[number]" to define the type of the song param, that means you have a created your own type which will only limit the values to the "songs which are part of your playlist array", so if you pass any other string or make a typo , compiler will through you an error.

e.g :-
const keywords=['var','let','const'] as const;

function getKeyword(keyword:string){
return keywords.find(a=>a===keyword);
}
getKeyword('var') //Valid
getKeyword('let') //Valid
getKeyword('cout') //Returns undefined.

To limit keyword:string parameter to include only 'var|let|const' as values you can use typeof keywords[number] and modify your code like this.

function getKeyword(keyword:typeof keywords[number]){
return keywords.find(a=>a===keyword);
}
getKeyword('var') //Valid
getKeyword('let') //Valid
getKeyword('cout') //TS throws compilation error.

Collapse
jaycruz profile image
JayCruz

Thanks! It sounds like by saying typeof keywords[number] your saying, get the values from the indexes of that const.

Collapse
cherryblossom000 profile image
cherryblossom000 • Edited on

That TypeScript playground gist/docset feature looks really cool!

Collapse
brunnerh profile image
brunnerh

Not fan of the suggested solution to the intermediate problem. It creates unnecessarily tight coupling between all the functions, which defeats the purpose of having them exist separately in the first place.

I would make the functions generic and only require the minimal used interface (the estimate property).

Solution

(The { estimate: number } could of course be extracted.)

Collapse
aleclofabbro profile image
Alessandro Giansanti

Hi there!
going to be fun :) here's my solution:

Collapse
jcofman profile image
Jacob Cofman

Here we go 🚀

Beginner

intermediate

Collapse
tusharar091 profile image
tusharar091

My Solution

Beginner

Intermediate

Collapse
leko profile image
Leko

My solution (Intermediate)
typescriptlang.org/play?jsx=0#code...

Collapse
drothmaler profile image
Daniel Rothmaler • Edited on

Hey ho, those are my solutions:

:-)

Collapse
belinde profile image
Franco Traversaro
Collapse
dzuremar profile image
Martin Dzurenko
Collapse
wimzylive profile image
Rushi Patel
Collapse
stefanhoutzager profile image
Stefan Houtzager
Collapse
brunagarcia profile image
Bruna Garcia

Channeling my inner dj with the this challenge 🎃 any inputs are welcome my TS playground

Collapse
jaxp profile image
Jakub Patočka

Is it supposed to be runnable? I get an error right after opening the playground link.

Cannot use import statement outside a module

Collapse
orta profile image
Orta Author

It's not - the Playground can get types from npm modules but not the runtime code, so any time the runtime sees an import the JS bails.

Collapse
jcmdonald profile image
James McDonald

Quickie: bit.ly/3vUEhhG

Collapse
orta profile image
Orta Author

Oops! Links are updated, great solutions folks!

Collapse
jcmdonald profile image
James McDonald

Intermediate Challenge: bit.ly/3bboVMb

Collapse
anuraghazra profile image
Anurag Hazra

The links seems to be broken.
dev.to/play?#gist/927ccc66ae3022dc...