Orta for typescript

Posted on Oct 26, 2021 • Updated on Oct 28, 2021

Type | Treat 2021 - Day 1

#typescript #challenge

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:

The New TypeScript Handbook
The TypeScript Community Discord
The comments on each Dev.to post!
Our previous Type | Treat 2020 challenges

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.

Top comments (24)

Nick Taylor • Oct 27 '21

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. 😎

Orta • Oct 27 '21

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

Orta • Oct 27 '21

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

Nick Taylor • Oct 27 '21

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

brunnerh • Oct 28 '21

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

JayCruz • Oct 26 '21

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

tusharar091 • Oct 27 '21

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.