TypeScript中能否定义绑定特定类型的React函数组件？

可行实现方案 #

完全可以通过TypeScript泛型实现你的需求，你原有代码的核心问题是把TMODEL当成了固定可引用的类型，但实际上它是随传入模型变化的类型占位，且TS类型仅在编译阶段存在，运行时会被擦除，无法直接执行new TMODEL()逻辑，具体实现步骤如下：

1. 先定义所有业务模型的基础约束，匹配你代码里用到的实例属性、构造函数要求：

// 所有模型实例必须包含的公共属性，匹配你代码里用到的record.id等字段
interface BaseModel {
  id: string | number;
}
// 约束模型类的构造函数类型：接收接口数据返回对应模型实例
type ModelCtor<T extends BaseModel> = new (data: unknown) => T;

2. 改写组件为泛型组件，将模型类型作为泛型参数透传：

import { useState } from 'react';

interface MyCompProps<T extends BaseModel> {
  model: T;
  // 必须显式传入模型类，解决TS类型擦除后运行时无法new实例的问题
  modelCtor: ModelCtor<T>;
  records?: T[];
  // 其余自定义属性
}

function MyComp<T extends BaseModel>({ model, modelCtor }: MyCompProps<T>) {
  const [record, setRecord] = useState<T>(model);

  const load = () => {
    // 实际场景可根据modelCtor映射对应接口地址，不用硬编码
    const respData = loadAjax('当前模型对应接口地址');
    setRecord(new modelCtor(respData));
  };

  return (
    <>
      Record ID: {record.id}
      {/* 其余渲染逻辑 */}
    </>
  );
}

3. 业务侧使用方式，和你的预期基本一致，仅需额外传入对应模型类：

const cat = new CatModel(/* 初始化参数 */);

// 组件使用
<MyComp model={cat} modelCtor={CatModel} />

更优的类型绑定优化方案 #

你可以根据业务场景选择以下方式简化使用、强化类型绑定：

• 全局映射减少传参：给所有模型类加静态endpoint属性声明自身接口地址，组件内部直接通过model.constructor拿到对应类和接口地址，不需要额外传modelCtor和接口地址，适合模型逻辑统一的项目。
• 纯展示场景简化：如果组件不需要在内部构造新的模型实例，仅做数据展示，可以完全去掉modelCtor入参，泛型仅做类型校验，直接使用接口返回的普通对象即可，代码更轻量。
• HOC提前绑定类型：对于固定使用某类模型的场景，可以用高阶组件提前绑定模型类，生成专用组件，使用时和你预期的写法完全一致，不需要每次传入模型类：

// 提前绑定CatModel，生成专用组件
const CatModelComp = (props: Omit<MyCompProps<CatModel>, 'modelCtor'>) => {
  return <MyComp {...props} modelCtor={CatModel} />;
};

// 使用时无需传额外参数，类型自动绑定为CatModel
<CatModelComp model={cat} />

注意：不要尝试直接在泛型组件内写new T()这类逻辑，TS编译后类型信息会完全移除，运行时不存在T对应的构造函数，必然会报错。

内容的提问来源于stack exchange，提问作者M.Imran Mamda