KEYOF and EXTENDS right off the bat?! - Type Challenges #1

Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

Follow Matt on Twitter

Do the challenge!

[SlateIvanovo]

Hey, Matt, what's the thing that does a hover popup for you when you make a comment with ^? in it?

[allie-ontheweb]

This came up on my recommended and is *extremely* appreciated! Been struggling to understand this kinda typing in TS especially when the variables are as meaningless as T and K so great you expanded these. Will be sure to watch the rest! ☺️

[zazoobobby]

This may have been the best video I’ve seen on advanced generic usage in typescript. Cheers and thanks for the great content! You earned a sub.

[mmmike]

Looking forward to this series (and the course!)

Hi Matt. So helpful! What kind of magic is this // ^? ?

[esmaeilmirzaee]

Thanks for sharing. May you explain more?

[gulneckm.]

As someone who never knew typescript more than "the .ts.d you put into subfolder for javascript to have sensible autocomplete" it's really interesting series.

[flammea_]

I'd love to know what extensions and keyboard shortcuts you use for your typescript code. For example that `// ^` syntax for autocomplete looks so helpful

[daerhiel]

Trying to figure out if this 'neat little syntax '// ^?' is only available on TS playground or can be added to VSCode, anyone knows? Almost broke my head..

[dogoku]

Hi, in one of your previous videos, you showed how to reorder/prioritize props of a type that is extending a much bigger type, using Omit. Are there any other methods of prioritizing props that don't involve having to manually type prop names? My particular use case is writing custom elements and my types extend the base HTMLElement type which contains hundreds of props, but I want to prioritize my custom element props first. Thanks for all the help <3

[awekeningbro]

hey Matt, can you do a video about the infer keyword? Thanks.

[khashe]

I came across that repo yesterday and had sooo much fun with the (easy) types. However, as a beginner I got stuck very easy and it's so hard to actually debug what you're doing wrong so I had to like re-watch your videos to get a hint 😅

Hopefully it gets better. Does anybody know any books/resources that dive deep into this part of TS?

[moritz]

I love these short explanations. How does the ^? comment work? Is that a vscode plugin or something?

[ColinRichardson]

I see the MASSIVE inlines have made a reoccurrence.. {{shudders}}

[Cognitoman]

When’s your typescript course ? I’m very noobish with typescript I understand all the basics but really want to understand typescript

[blameItleaveit]

Hello, thank you for the great tutorial. Can we optimize this so that I don't have to manually add condition for NestedObject each time

```
class User {
public username: string = ''
public age: number = 1
}

class Project {
public title: string = ''
}

class Pipeline {
cord: string = ''
}

enum ROUTE_KEYS {
USER = 'USER',
PROJECT = 'PROJOECT',
PIPELINE = 'PIPELINE'
}

interface Entities {
USER: User;
PROJECT: Project;
}

type NestedObject<T> = { [key in
T extends ROUTE_KEYS.USER ? keyof User :
T extends ROUTE_KEYS.PROJECT ? keyof Project :
T extends ROUTE_KEYS.PIPELINE ? keyof Pipeline :
never
]: Record<'like', boolean> | boolean }

type filterByKeyHash = { [key in ROUTE_KEYS]: NestedObject<key> }

const filterByKeysHash: filterByKeyHash = {
USER: {
username: false,
age: true
},
PROJOECT: {
title: true,
},
PIPELINE: {
cord: true
}
}
```

[justinhalsall]

Great video! Can you do `keyof obj` and filter those keys by objects value for that key? So for example I’d like to monkey patch all functions of an object, to do that I’d like to get all the keys of that object that return a function.

[chrisalexthomas]

I understand typescript pretty well until you get into a lot of this really customisable type code that you keep making in your videos. I guess that means I don't really understand half of what is actually possible. But I find these videos are great for filling in gaps and explaining things that previously, I had no idea about. Thanks a lot!

[korn]

These videos has been really interesting, but as someone who has begun to learn TS, I have a genuine question I want to ask.
Is any of this really needed? I think of TS as nothing more than a type-annotated JS. Frankly, I don't even know what half of the expressions shown resolves to, let alone do.