Visual Types, a humble collection of semi-interactive TypeScript lessons, is ready to be clicked upon. ← 👀

I'll add to this over time, so please let me know if there's anything you'd like to see covered or improved! 🫡

Let me know if anyone manages to unlock all the ACHIEVEMENTS. 😜

Beautiful! FYI this resolves to { x: never }

I had no idea! Fixed! 🫶 (Plus added one more example for the intersection of objects inside of an object)

Neat! I would also order the utility types much higher, and show the difference between Pick/Exclude/Omit/Extract, since that's a very common source of confusion

I'll do just that! I still need to work on the ordering and improve some of those last few examples (and add more). It gets a bit rougher as it goes on due to my self-administered first-draft deadline! 😜

@schickling super cool i love this ps on ios safari 18

@schickling Nooooooooooooo

looks sweet! already sharing in my network I think it could be kinda confusing to show the results in curly braces { … } as some new TS users may mistake that literally with objects (e.g. { key: value })

Doh. You're right. Darn mathematical set notation! I'll try to find another less ambiguous method for representing sets of values.

Maybe wrapping it in new Set([ 😜

Haha true – btw not the most intuitive to have to hold shift to go backward when clicking through an example either (though I do like it)

I’m more comfortable with that one because you could always use the arrow keys or click all the way around. I think the only other solution would be to have two explicit buttons, but that would be a bit of clutter. Thanks for the great feedback by the way! I really appreciate it :)

ofc!

The animations are elite, but they could use some mobile consideration. I wish all docs were this well done and interactive. Fantastic work!

@CanadianDevDad Yeah. It's definitely desktop first at the moment 😅 I've got to figure out how to rework some of them for phone sized screens.

Long time no see, this was great thanks.

Hey Mat! Thank ye :)

You got a rust job! Nice :)

Hah. Oh how I wish. 95% python, 5% rust.

You deserve a follow for this beauty.

I think we need another hidden badge for unlocking all achievements 👀

👏👏👏 Achievement achievements! Should this trigger yet another achievement, and so on; an infinitely linked list of congratulations?

Hoping that won't explode my call stack 🤣

olha que maneirinho @typescripting

Who knew clicking types could be such a soothing experience

I've spent centuries clicking types in my IDE to no avail. It's high time for clicked types to jiggle most pleasantly!

sound design and animation so immaculate i thought this was an award winning game

This is so cool. The practical use of keyboard navigation, scroll snapping, and sound here is absolutely delightful. I want every web application to feel this smooth.

Thank you so much for making this!

This is a fantastic way to learn TypeScript. We build Pochi with TypeScript and love seeing creative ways to help developers master it. Great work!

Damn good!

Thanks, Steve! 👈👈😎

Oh hey! Kit's back

I shared this with all my friends. Amazing!!

Wow 🤩 very very niceeee !! Thanks for sharing!!

Amazing work. Only because you seem like a perfectionist, I noticed there is vertical fade cutoff for code blocks on mobile (safari)

Doh! Yeah, I've got to fix that stuff. The desktop version is what I gave 99.9% of my attention to. 😅 (And thank you!)

this is so cool!

Beautiful!:)

Very useful, thank you.

whoa this is amazing

Amazing! Thank you

Oh wow that's awesome and the sound design 🕺

this is amazing.

In main-DosnN-le.css, `code { font-family: Commit Mono,ui-monospace,monospace }`. Should it be `code { font-family: var(--font-mono) }` to make it consistent? I might learn Typescript because of you :-)

Please release the source code, really like the animations. Are they done with Motion?

They are! 💯 I will release the source eventually, but it's going to be a little while! Working on some more things.

Thanks a lot!

Thanks Sam for adding vim controls

Super cool!

whoa amazing

Gimme 0 dollars NOW

@nexxeln one of the most delightful learning experiences I’ve ever had

This is beautiful. The attention to detail given to each aspect is mind-blowing.