TypeScript类扩展下React通用组件属性访问控制求最佳实践

核心思路 #

通过拆分基类体系，将无label的核心属性和带label的扩展属性分层，结合TypeScript泛型与类型守卫，既实现子类的属性访问权限控制，又保证通用组件能兼容所有子类。

具体实现步骤 #

1. 重构基类结构 #

拆分出两个层级的基类，让不同需求的子类按需继承：

// 核心基类：包含所有子类共享的基础属性，无label
class CoreBaseClass {
  public id: string;
  public value: string;
  public createdAt: string;
  public updatedAt: string;

  constructor(apiResponse: any) {
    this.id = apiResponse.id;
    this.value = apiResponse.value;
    this.createdAt = apiResponse.created_at;
    this.updatedAt = apiResponse.updated_at;
  }
}

// 带label的扩展基类：继承核心基类，仅开放给需要label的子类
class BaseClassWithLabel extends CoreBaseClass {
  public label: string;

  constructor(apiResponse: any) {
    super(apiResponse);
    this.label = apiResponse.label;
  }
}

2. 子类实现 #

• 不需要label的子类（如FirstExtension）直接继承CoreBaseClass，自然无法访问label：

class FirstExtension extends CoreBaseClass {
  // 自定义业务逻辑，无label访问权限
}

• 需要label的子类（如SecondExtension）继承BaseClassWithLabel，可正常访问label：

class SecondExtension extends BaseClassWithLabel {
  // 可直接使用this.label
  getLabelInfo() {
    return `Label: ${this.label}`;
  }
}

3. 改造通用React组件 #

用泛型支持所有子类，通过类型守卫安全访问label：

// 定义泛型Props，兼容CoreBaseClass及其所有子类
type ComponentProps<T extends CoreBaseClass> = {
  resource?: T | null,
  onCreate: (resource: T) => void,
  onEdit: (resource: T) => void,
  isEditing: boolean,
  isLoading?: boolean,
}

// 类型守卫：判断实例是否包含label属性
function hasLabel(resource: CoreBaseClass): resource is BaseClassWithLabel {
  return 'label' in resource;
}

const GenericComponent = <T extends CoreBaseClass>({ 
  resource, 
  onCreate, 
  onEdit, 
  isEditing, 
  isLoading = false 
}: ComponentProps<T>) => {
  const [name, setName] = useState(resource?.value || "")
  const [nameError, setNameError] = useState<string | null>(null)
  // 仅当实例有label时才初始化对应状态
  const [label, setLabel] = useState(resource && hasLabel(resource) ? resource.label : "")

  return (
    <>
      {/* 根据是否有label渲染对应UI */}
      {resource && hasLabel(resource) && (
        <div>
          <label>Label:</label>
          <input 
            value={label} 
            onChange={(e) => setLabel(e.target.value)}
          />
        </div>
      )}
      <div>
        <label>Value:</label>
        <input 
          value={name} 
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      {/* 其他业务逻辑 */}
    </>
  )
}

4. 组件使用示例 #

// 使用无label的子类
<GenericComponent<FirstExtension>
  resource={new FirstExtension(apiData)}
  onCreate={(res) => console.log("创建FirstExtension:", res)}
  onEdit={(res) => console.log("编辑FirstExtension:", res)}
  isEditing={false}
/>

// 使用带label的子类
<GenericComponent<SecondExtension>
  resource={new SecondExtension(apiData)}
  onCreate={(res) => console.log("创建SecondExtension:", res)}
  onEdit={(res) => console.log("编辑SecondExtension:", res)}
  isEditing={true}
/>

方案优势 #

• 权限明确：通过继承分层在编译期就限制了label的访问范围，避免非法访问
• 组件复用：泛型组件无需修改即可兼容所有子类，减少重复代码
• 类型安全：类型守卫确保访问label时的合法性，消除类型报错与运行时风险

内容的提问来源于stack exchange，提问作者ARTHUR