Why do UserDetailProp has to be a different type than User type?
export type User = {
id: string
name: string
email: string
// thêm password_hash nếu bạn muốn hiển thị / xử lý
}
type UserListProps = {
users: User[];
title?: string;
};
type UserDetailProps = {
user: User | null | undefined;
};
export const UserDetail = ({ user }: UserDetailProps) => {
The UserDetailProps type is different from the User type because it represents the shape of the props passed to the UserDetail component, not the User object itself. Here's why this distinction is useful:
Flexibility in Component Props
UserDetailProps allows the user prop to be User | null | undefined . This is important because the component needs to handle cases where the user data is not available (e.g., loading state, error state, or invalid user ID).
The User type alone would not account for null or undefined .
Separation of Concerns
The User type defines the structure of a user object (e.g., id, name, email). On the other hand, UserDetailProps defines how the UserDetail component expects its props to look. This separation makes the code more modular and easier to maintain.
Reusability
The User type can be reused across the application wherever user data is needed, while UserDetailProps is specific to the UserDetail component. This avoids coupling the component's props directly to the User type, making the component more reusable.
In summary, UserDetailProps is tailored to the needs of the UserDetail component, while User represents the data model for a user. This distinction improves type safety, flexibility, and maintainability.
