Building Fluent Interfaces in TypeScript

TypeScript has many great tools for building great fluent interfaces! In this video, we take a look at some of the best ways to do that.

[fagnersales]

That's a topic I really love, it makes programming with TypeScript feel magic. Unfortunately, couldn't understand really how to implement that. I'll for sure read the blog post, and I'd love to have more content on this.

[zeeeeeman]

👏 holy crap that piping explanation was great .Thank you. Subbed!

[RyanDsouza-beqx]

Thanks for this vid! I always forget that functions can also have properties on them and this makes for interesting patterns like this :)

[temoncher]

Nice explanation! Probably TypeScript is the best language for fluent interfaces because of its flexible type system

[LazyDeveloper-]

Great video! I love when great typing improves the overall developer experience a lot! Keep on going!

[mickdavies]

Great job! Where was this video when I was starting to get my mind around how Promises 'really' work? 😊

[minyoungna]

This inadvertently solidified my understanding of effect.to haha, because you “run” an effect after you defined them, and they are not executed at the time they are written.

[shashydass]

Great video and blog post. Succinct and very informative!

[akam]

I wish I saw this earlier. BTW, for the table function in the last example, you can actually use it with just "return this as QueryBuilder<Tables & { [X in N]: T }>".
This however will not work for versions less than 5.1.6. Library authors seeking to support older TS versions or projects stuck on such codebases will have to create a new object unfortunately.

[azizsafudin]

That table method to update the type is also used in trpc’s meta(), and Zod too I believe, common pattern used in libraries

[trentcox]

your damn right i want you to go through how your building that query builder with that typescript black magic! easy sub.

[ghostinplainsight]

@Andrew Burgess can you make a video on types for currying and composition if it's possible.

[ayushporwal]

I will revisit the video again after reading blog, it was a bouncer after the pipe function xD

[veritatas]

i recently tried to do sth similar for my own trpc and this would have helped

[furycorp]

Doesn't this risk hurting tree shaking e.g. zod vs. valibot -- i.e. if not done carefully it can blow up client-side bundles? Either way nice video thanks for sharing your knowledge :) These interfaces do have their place!

[AlexGrand]

The main difference between OOP and FP for "fluent interfaces" is that you should understand that in OOP most of the time you "mutate" the instance, so there's no easy way to "clone" it. In FP, each .pipe will create a new function, so it's easy to split the same chain to 2 or more cases.

The main example why "mutating" is bad is preparing `list` endpoint where you are doing COUNT() in one query, and limit/offset in another. I FP way you just add base query and splitting it to two variants: count and data. With OOP you should implement own "cloning" or create 2 queries with the same conditions

[aro_matt]

The pipe brings kotlin's apply to my mind.

[Danielo]

I was a bit discouraged by the first simple example, but I had faith, and watch until he very end

[Caldaron]

isnt this pipe chaining super hard on linting performance?

[athulgeorge]

With the query builder example how would you make it show a TS error when you call more than 1 select method. And how could you limit the callable methods depending on the stage of the query. For example the only option should be the select method when you type "q." . But after you do that, then the only option should be the from() method, when you type "q.select()." ? Would be cool to see how this is done, similar to how drizzle have done it.