DEV Community

Cover image for Type | Treat 2021 - Day 1

Type | Treat 2021 - Day 1

Orta on October 26, 2021

Type or Treat Challenges Today we're starting up our second year of Type | Treat (or "Type or Treat".) We will be presenting some "spook...
Collapse
 
nickytonline profile image
Nick Taylor

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

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

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

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

That TypeScript playground gist/docset feature looks really cool!

Collapse
 
jcofman profile image
Jacob Cofman

Here we go 🚀

Beginner

intermediate

Collapse
 
tusharar091 profile image
tusharar091

My Solution

Beginner

Intermediate

Collapse
 
wimzylive profile image
Rushi Patel
Collapse
 
drothmaler profile image
Daniel Rothmaler • Edited

Hey ho, those are my solutions:

:-)

Collapse
 
belinde profile image
Franco Traversaro
Collapse
 
stefanhoutzager profile image
Stefan Houtzager
Collapse
 
aleclofabbro profile image
Alessandro Giansanti

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

Collapse
 
leko profile image
Leko

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

Collapse
 
brunagarcia profile image
Bruna Garcia

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

Collapse
 
orta profile image
Orta

Oops! Links are updated, great solutions folks!

Collapse
 
jcmdonald profile image
James McDonald

Quickie: bit.ly/3vUEhhG

Collapse
 
jcmdonald profile image
James McDonald

Intermediate Challenge: bit.ly/3bboVMb

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

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
 
anuraghazra profile image
Anurag Hazra

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