SUPER nice pattern for React props #typescript #react

Become a TypeScript Wizard with my free beginners TypeScript Course:

Follow Matt on Twitter

Join the Discord:

[marcinparda]

What are advantages of namespaces over ComponentProps<T>? Or maybe it's just a curiosity?

[snivels]

What is the point of this other than unnecessary complexity?

[AlexAD]

This comment section gave me :). Thanks, Matt!

[nazaka]

cool feature, but it is still an inconvenience the name of namespace need to match the name of a component. That means you need to update both when refactoring code. Ideal behaviour would be giving the namespace a name and making it export the component by default i guess

[mickmister]

Why not `React.ComponentProps<typeof MyComponent>`?

[gauravkelkar]

Why do you need to export the interface again? You get type safety with just props, instead of MyProps

[willness]

how do you get the animations between the different code snippets in the video?

[KPSChannel]

People actually use namespace in TypeScript? Can you give us some use cases for namespace (I guess module as well)? Thank you in advance! 🙏

[tahasoft]

At this code second line
import { MyComponent } from "./MyComponent";

export const WrapperComponent = (props: MyComponent.Props) => {
return <MyComponent {...props} />;
};

I get this error:
Cannot find namespace 'MyComponent'.ts(2503)

[scribl]

that does look nice. what are you using to animate this, btw?

[adamlbarrett]

Does exporting like that interfere with ComponentProps<T> ?

[EthanStandel]

I like namespaces for this kind of thoughtful encapsulation. It's unfortunate that Typescript and linters seem to somewhat recommend against them because they're not a JavaScript native concept. I kind of just wish TS would let us store types within objects or something to replace it.

[androidgeeking]

Don't you need to export the namespace?

[yassinesafraoui]

This also means you just reserved MyComponent( or whatever you called it) and it can't be used elsewhere unless you shadow it, not fun if it's Button, I could be wrong though I kinda just guessed it based on what I know

[technical_hq]

It worked. Thanks for sharing. But also resulted in an eslint warning

[luisandrade]

Wouldn’t that make you define all component props interfaces where you declare the namespace?

[rafadydkiemmacha]

This is the kind of "improvement" that real programming gurus make fun of.

[MJW]

I think the namespace should also be exported. Can’t get this to work without also exporting the namespace.

[윤지만-wm]

If it gets more complicated, everyone would agree that one of the main reasons we use the type is aliasing

type User = {}
= api
type User = {}
= UserInformation component (with the property chcked)
type SelectBox = { user: User}
= Maybe an api type of User? Maybe a UserInformation component type of User?

Imagine using the type declared above in more than one component. You'll have to create another user and you'll have to use as (this happens more often than you think)

Of course, using namepspce doesn't solve it. One thing is for sure: we can be very, very solid, where those users are being used and declared and used for what purpose.

That's all, actually. A code with a solid purpose is easier to refact and easier to update. It's firm to know what type of user you're having trouble with.

[KawazoeMasahiro]

Namespaces have been largely considered as deprecated since the addition of es modules back in early versions of typescript. You can acomplish the same thing by importing your component using import * as MyComponent from '...'. You also gain the benefit of naming the namespace whatever you want, which avoids name collisions. They are also incompatible with treeshaking, so the entire namespace needs to be pulled instead of only the imported tokens.