No BS TS #8 - Generics with keyof in Typescript

The keyof operator in the generics context is as powerful as it is cool. Once you get the hang of it you are going to make some great APIs that are both easy to use and inherently type safe. You are going to fall in love with this Typescript operator.

00:00 Introduction
00:15 Start coding
00:25 Example #1 - Pluck
03:36 Example #2 - Event Map
07:30 Outroduction

👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#typescript #NoBSTS

[theyreMineralsMarie]

It's so cool how TS applies the design patterns of statically typed languages to a dynamically typed environment. The first example using keyOf is almost more like data validation, in that it doesn't just dictate strings as allowed arguments, but a specific set of strings.

[yosvelquintero]

this is literally "No BS TS" content!!
- thank you
Jack Herrington

[francis_n]

Another great coding lunch break away from coding job. Thanks Jack 👍🏾

[Borisua]

😲 need to watch it again



a couple of times!

[george_bullock]

Great video. Very cool topic. And I didn't know we can use bracket notation to access interface props 🤯

[akkimahajan]

Consider myself totally sold to your videos. 👌Just keep pushing these No BS TS Playlist.

[buchdev]

This video is simply awesome!! Thanks for share your knowledge with your community

[zykoz]

Type safety for events is so elegant and genius!

[rishabh.sharma]

AMAZING - Both you and typescript😄
Thanks for making this video.

[insanityrodax]

Like my tech lead told me: "Typrescript is like typing on steroids".

This series has been phenomenal, as I am just rookie.

[dansnel]

Liked your sample, think you deserve attention, thank you for it. "Typescript Data Validation (in type definition)" is a subject that needs your approach, in case you'll have some time for it.

[diyaagubarah]

again very excellent tutorial from my favorite youtuber I hope you will keep uploading such an amazing topic in diffrent software aspect I can't wait when you will make some tutorial about Design Patterns & DSA and how to apply those in React and Node JS. ❤❤

[Alankid]

just recently found your tutorals it's amazing!

[mrjebbar]

You seriously are too amazing. We want more, can you please become a full time teacher/YouTube!?!?!

[jimshtepa]

Hello Jack, thank you for your effort. I assume recording of 8 minute video may take hours or tens of hours of your time and we appreciate the time you spent making this content. On a separate note, I am wondering if there are any practice sets (other than challenges you have produced) that you might have heard of or know about that allows to test our knowledge of these materials? last two episodes generics/keyof generics are super interesting but also not easy to wrap head around. In this particular video when you showed second example I made 5 mistakes attempting to reproduce the example. I think it takes months of practice of various cases in order for these things to become usual. Once again, thank you for the video

[arthuroliveira]

This is A M A Z I N G! Thanks for sharing Jack!

[akarikirigaya]

Hello, first of all thank you so much for this series Jack!
I've only recently started to switch over to typescript, and it's been a great help!
I've got some questions regarding the usage of the generics and extends.

This is how I would approach Typing the two example functions in the video previously:

// since `KeyType` is based on DataType, the generic isn't really taking in any new 'generic' type information?
function pluck2<DataType>(
items: DataType[],
key: keyof DataType
): DataType[keyof DataType][] {
return items.map((item) => item[key]);
}

// and here, since Name is based on the EventMap Type that is already defined, Name wouldn't be taking in any new 'generic' type information?
function sendEvent2(
name: keyof EventMap,
data: EventMap[keyof EventMap]
): void {
console.log([name, data]);
}

I want to ask is there any benefits/differences between defining the `KeyType` and `Name` in the generics compared to the way defined them above? Did I miss something, or is it simply a stylistic difference?
I've done some limited testing, and the two versions seems to function the same, and when calling this version of the function, the editor is also able to infer and suggest the possible options for the args.

Thank You very much for your time!

[mirjana]

Amazing content, thank you for teaching me so, so much! As a bonus I laughed hard about Mimi the dog, as Mimi is my nickname 😂

[alexisf]

If I understood this right, when you call pluck we first give it an array, thus making datatype an array of objects, which has the properties name and age. Then, KeyType has to be one of the properties in said array of objects?

It's kind of like a 'filter' of sorts, where you get whatever property you input as the 2nd parameter in the pluck function? if I understood it right, this is so cool!

[NishantTilve]

4:37 is this like a short-hand syntax to extend the BaseEvent interface to create an addToCart interface?