Read on Twitter
I've started reducing the amount of interfaces I use in projects actually. I write smaller, re-usable, composable functions (thanks Elixir for teaching me this), and then in their type signatures I only write the keys on the object that they use.
Quick thread: https://twitter.com/mjackson/status/1385414736511070211
Quick thread: https://twitter.com/mjackson/status/1385414736511070211
So let's say we're building an app and we have a User type that looks like the following. A user has a name, username, email, a profile pic, and various other things. This list only grows over time.
Here's a component for rendering the user's avatar / profile:
Here's a component for rendering the user's avatar / profile:
So here's what it would look like to use this component, passing in some dummy data:
One of the things you'll notice here, though, is that this component *isn't using half of the data we're passing in*. It really only needs a name, a username, and a URL of the profile pic.
One of the things you'll notice here, though, is that this component *isn't using half of the data we're passing in*. It really only needs a name, a username, and a URL of the profile pic.
So what we've done by reusing this interface here is limit the reusability of our component.
For example, say we had 'bots' that could join our app later. They need their own avatars rendered out. However the following would not work:
For example, say we had 'bots' that could join our app later. They need their own avatars rendered out. However the following would not work:
Even though we don't need the email passed in, Typescript still relies on it.
Even moreso, relying on this single 'User' interface for every part of our app would break things down the road. Adding or removing fields to it would require us to make more changes than needed.
Even moreso, relying on this single 'User' interface for every part of our app would break things down the road. Adding or removing fields to it would require us to make more changes than needed.
So in my mind, the right solution is something like the following:
Thanks to Typescript's structural typing, we can pass in the entire 'bot' object and Typescript ensures that that's sound.
Thanks to Typescript's structural typing, we can pass in the entire 'bot' object and Typescript ensures that that's sound.
We also don't worry about the *size* of the profile pic here: whether we need to render a large or a small URL is up to the caller.
The function is also *much* more readable now, and it makes it clearer to the user what exact information on the object is used.
The function is also *much* more readable now, and it makes it clearer to the user what exact information on the object is used.
So I've noticed that by inlining types or by sticking to types that are as close and as local to the functions that use them as possible, things are just easier and you don't have to change stuff as often. Stuff gets easier to understand.
It's great to reuse functions as much as possible, but when you're writing types, try to keep them as local to the function as possible. You can have multiple interfaces with the same name that mean different things in different contexts (modules).
