สมมติว่าเรามีคอมโพแนนท์ 3rd party lib ที่คอมโพแนนท์นั้นไม่ได้ export ชนิดข้อมูล Props ของคอมโพแนนท์ตัวเองออกมาให้ เช่น

1interface ButtonProps {
2  color: 'primary' | 'secondary';
3  children: ReactNode;
4}
5
6const Button = (props: ButtonProps) => {
7  return <button>...</button>;
8};

หากเราต้องการทราบชนิดข้อมูล Props ของคอมโพแนนท์ Button จาก 3rd party lib ดังกล่าวมีหลายวิธีที่สามารถทำได้

วิธีแรกคือการใช้ความสามารถของ Utility Types ตัวนึงของ TypeScript คือ Parameters

1type Props = Parameters<typeof Button>[0];
2//   ^^^ ButtonProps

อีกวิธีคือการใช้ ComponentProps ของ React ดังนี้

1import { type ComponentProps } from 'react';
2
3type Props = ComponentProps<typeof Button>;
4//   ^^^ ButtonProps

นอกเหนือจาก ComponentProps แล้ว React ยังมีชนิดข้อมูลเทียบเคียงอื่น ๆ อีก เช่น ComponentPropsWithRef และ ComponentPropsWithoutRef