🥰Một ví dụ định nghĩa kiểu dữ liệu prop cho 1 component (ok)

app\page.tsx

import Test from "./Test";
export default function Home(){
  let user = { id: 1, email: '[e-mail]'};
  return (
    <div className="grid">
      <Test userDetails={user}  />
    </div>
  );
}

app\Test.tsx

import React from 'react';
import { z } from 'zod';
const userSchema = z.object({
  id: z.number(),
  email: z.string().email(),
});
type User = z.infer<typeof userSchema>;
export default function Test({ userDetails }: {userDetails:User }){
  console.log(userDetails);
  return(
    <div>
      Test
    </div>
  )
}

Trước đó thì cữ nghĩ sử dụng như này

Nhưng không phải, phải sử dụng như cách này