The Power of TypeScript Generics

TypeScript generics are incredibly powerful and can make it really easy to both control the shape of your arguments while still taking advantage of the narrower types that your arguments may already have!

If you want more info about generics check out

*My Links*

[EpKjelltzer]

Can't you simplify the generic parameter here? If you instead specify that `T extends DropdownOption`, then you can say that options is of type `ReadonlyArray<T>` and onSelect is of type `(arg: T) => void`. I believe this gives you the same type safety but with a simpler generic - which also means that the generic parameter of `Dropdown` can be simply `T extends DropdownOption`. I also think this expresses the generic constraint more clearly.

[cyber-man]

Really nice video, keep making them Love them :) it's cool not to have just beginner videos on yt, would be cool if you attach some screenshots of documentation when explaining stuff :) congrats on 10k!

[georgel]

Nit: no need to assert `as const` for every `value` string in the `options` array; only the one after the entire array matters!

[joostschuur]

This is also a really good example of how to intimidate someone who just started using TypeScript ;)

[hugodsa]

Congratulations on 10k subscribers!! Been loving watching your content Andrew!

[TheDb]

Hey, try it:

declare function Dropdown<const T>(props: {
options: T[];
onSelect: (arg: T) => void;
}): void;

Dropdown({
options: [
{ value: "gadget" },
{ value: "widget" },
{ value: "foobar" },
],
onSelect: arg => {
console.log(arg.value)
// ^? (property) value: "gadget" | "widget" | "foobar"
}
});

Keeping benefits from pure JS and with all the power of Typescript - cleanest version in my opinion ;>

[erickmoya]

We just needed to know the parameters type, return type of our functions, and avoid "cannot find parameter x of undefined".
Why is this in version 5.0?

[OmarFKuri]

Why not use `T extends string` and make DropdownOption a generic as well so that value is a string? Then you can remove all the `as const` calls from the array

[merotuts]

Didn't know you could extract the type of an array element simply by accessing them with [] on type-level. I used to write my own cringe custom utility type for that 😅 Unpacked<>

[adambickford]

This almost feels like leetcode but with types. Definitely cool and I learned a bit (T[number]? wtf?) but this would certainly not be the norm for application code.

[tito-ace]

typescript is great but as a newbie this is pain in my brain :(

[mahadevovnl]

Jezus, what a ton of code. It looks like it's over-engineered to hell and back, completely counter-intuitive. That T[number] thing is such a dumb syntax to begin with. Do you expect anyone somewhat new to TS to look at this and understand it? Ever?

Just write:

type TOptions = 'a' | 'b';
type TDropdownProps = {
options: { value: TOptions }[];
onSelect: (arg: TOptions) => void;
}

const bla: TDropdownProps = {
options: [
{ value: 'a' },
{ value: 'b' },
{ value: 'c' } // TS error
],
onSelect: (arg) => {
if (arg === 'a' || arg === 'b') {
console.log('yay')
}
if (arg === 'c') { // TS error
console.log('this can never happen')
}
}
}

So much simpler without all kinds of fancy TS magic. Very simply to understand.

[jasonlough]

yeah but... why?

Ill number my arguments so all the comments can point out exactly where Im wrong.

1) TS is mainly bloat. Look at all that extra code you had to write, which added significant mental overhead and slowed you down from delivering actual deliverables.

2) Look at what youre doing before you even throw TS at it: that function Dropdown would never ever make it to prod written that way. It seems like youre applying the pojo pattern, in which case you probably want to Object.assign() all sorts of random crap (not just options or onSelect) to some constructed object, and pass that into DropDown.

3) And the real killer for me is, these tutorials never have comments in them, comments which would handle 80% of any confusion TS tries to belay.

4) The official docs even say to use it TS lightly and that it can be overly verbose.

5) A decent set of unit tests are better than TS, and they dont get in your way as much, because you dont have to learn yet another opaque and broken language.