reactjs - วิธีทำให้การกำหนดชนิดของ props ของคอมโพเนนต์ React ขึ้นอยู่กับกันและกันและถูกอนุมานโดยอัตโนมัติ

ฉันมีคอมโพเนนต์ React แบบนามธรรม (BaseTable) ที่ดึงข้อมูลจาก API และแสดงผลลัพธ์เป็นแถวในตาราง:

interface BaseTableProps {
  columns: Column<R>[];
  fetchData: () => Promise<AjaxError | R>
}

const BaseTable: FC<BaseTableProps> = ({
  columns,
  fetchData,
}) => { return .... }

แล้วฉันจะนำตารางฐานนี้ไปใช้กับตารางข้อมูลเฉพาะที่ฉันต้องการแสดง

ตัวอย่างเช่น ถ้าฉันต้องการแสดงรายการสิ่งที่ต้องทำ ฉันทำแบบนี้:

// the JSON type that is being returned from the API
interface TodoJSON {
  firstColumn: string;
  secondColumn: string;
}

const fetchTodosAPI: Promise<AjaxError | TodoJSON> = fetchAxios('/todos');

const columns: Column<TodoJSON>[] = [{ key: 'firstColumn' }, { key: 'secondColumn' }];

const TodosTable = () => {
  return (
    <BaseTable fetchData=(fetchTodosAPI) columns={columns} />
  );
};

คำถามคือฉันจะพิมพ์ TypeScript ของ BaseTable อย่างไรเพื่อให้ฉันสามารถให้ generic R เท่ากับข้อมูลที่ฉันโหลดมาจาก API ในกรณีนี้คือ TodoJSON

ถ้าฉันสามารถทำสิ่งนี้ได้ ฉันจะมีคอลัมน์ใน BaseTable ที่เป็นประเภท Column

ด้วยวิธีนี้ fetchData และ columns ทั้งหมดจะเชื่อมโยงกันและฉันมีประเภทที่ปลอดภัยซึ่งถูกควบคุมจากฝั่งการใช้งาน

ถ้าฉันเปลี่ยนประเภทการตอบสนอง JSON ของ fetchData ในตาราง Todo คอลัมน์จะถูกสันนิษฐานโดยอัตโนมัติเป็นประเภท JSON ใหม่