No BS TS #17 - Mixins in Typescript

Let's check out how to have functions create functions, have functions create classes including using generics, and have them extend classes using mixins.

00:00 Introduction
00:13 Mixins Page
00:45 Functions creating functions
01:20 Functions creating classes
03:21 Functions creating generic classes
05:40 Creating a mixin
08:43 Review
10:11 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

[ryanzwe]

This one completely blew my brain up, especially the use of it with generics

[yourplayer]

I have yet to come across a use case for Mixins in my daily work, but I love the concept👍
It is really cool to see new stuff like this and I am a big fan of your No BS TS series so far.
I am really looking forward to all the content that you will create

[valeriofunk]

typescript is beautiful suggar syntax everywhere. i spent like 30 min figuring out all those types and got it right. And then you explained everything very simple. i should have watched the last part befoure pausing it hehe

[brijspy]

This video literally goes above my head at the end

[mohdhaziq]

Thank you Sir, i had difficulty dealing with Mixins with Class type currently. I'll be using your fantastic approach for my case. Thank you again.

[ThomasBurleson]

Love the use of generics to constrain the mixable source. This actually does not mutate the source but creates a new class that is a mixin of functionality. Wow, I did not know you could do this.

[Malak]

This one was really advanced. Will try to return to it tomorrow. Wasn't able to fully grasp it.

[MrDima]

Very good explanation! Much better than on documentation.

[collinsk]

Great explanation. Mixins used quite a bit in the Angular framework.

[victorlongon]

this is really interesting byt as others pointed I don't see directly use cases for it (I might be wrong). Nonetheless, the video was really nice and worth watching for the knowledge itself. Thanks, Jack!

[soobhhann]

you have the best tutorials thanks for your videos

[ZakiWasik]

Wow. I know how to do composition in JS, but have really been scratching my head over the Typescript way for the past week or so. I click on your video and suddenly everything "clicks" for me and I wonder how come I did not find that video the first time I was researching this. Turns out it was uploaded today :D Instantly subscribed!

What is your opinion on using applyMixins as described in the TS docs here? I can't really work out the benefits of using either approach over the other. They mention in the docs that applyMixins rely on your codebase over the compiler to keep the build- and runtime type-system in sync. But I'm not really sure what the implication of this is in practice?

[bidaarle]

you can use a generic and replace "getObject():object" in line 52 with "getObject():K" to make it more open and not bound to an object type.

[deemaagog]

That was very helpful, thanks. BTW, how do you draw on screen ?

[DavidSmith-efeh]

It's not complicated, but requires too much work to get it working. In dart you just use the "with" keyword in the class definition. Would be incredible if MS implemented this into TS, but I doubt it, since they follow ES too closely.

[yaserghananwi]

Jack, really nice tutorial i need more and more example about this feature Mixins in real work or when can I used it .

[marcoscarlomagno]

What kind of black magic is this? so cool!

[sam-zydn]

Thank you for your amazing videos Jack ! I am learning concepts from your videos indeed. I tested your initial class return from the function but I get an error that "Property 'completeLog' of exported class expression may not be private or protected." So basically it should be marked as public. But I wonder how in your video it does not show any errors. The code that I am referring to is :
function myLoggerClass() {
return class Logger {
private completeLog: string = "";
log(str: string) {
console.log(str);
this.completeLog += `${str}\n`;
}
dumpLog() {
return this.completeLog;
}
}
}

[dawid_dahl]

You both look and sound like another person I like and listen to a lot, Sean Carroll. Sorry I just had to say it. 😄

Thanks a bunch for all your great content! 🙏🏻

[TheGameCrafter]

No BS, this series is the only reason I didn't throw out typescript and run it over with a car.