如何用TypeScript限制React组件TextField的propertyName为VM属性？

要实现这个需求，核心是利用TypeScript的泛型和keyof操作符，让组件能根据传入的ViewModel自动推导可接受的属性名，在编译阶段就拦截无效的propertyName输入。下面是具体的实现步骤：

1. 定义泛型化的TextField组件Props #

首先修改TextField的Props类型，引入泛型来关联dataSource的类型和propertyName的可选值：

import React from 'react';

// 用泛型T指代传入的ViewModel类型
type TextFieldProps<T> = {
  label: string;
  // 绑定数据源的类型为T
  dataSource: T;
  // 用keyof T限制propertyName只能是T的属性名
  propertyName: keyof T;
  disabled?: boolean;
};

2. 实现泛型TextField组件 #

基于上面的Props定义组件，TypeScript会自动根据传入的dataSource推导T的类型，进而约束propertyName的可选值：

const TextField = <T extends object>(props: TextFieldProps<T>) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 直接修改MobX ViewModel的属性（因为MobX对象是可观察的，赋值会自动触发响应）
    // 这里用类型断言处理值的类型匹配，根据你的实际场景调整
    props.dataSource[props.propertyName] = e.target.value as T[keyof T];
  };

  return (
    <div className="text-field">
      <label htmlFor={props.propertyName}>{props.label}</label>
      <input
        id={props.propertyName}
        type="text"
        // 同样需要类型断言，确保值能正确映射为input的string类型
        value={(props.dataSource[props.propertyName] as unknown) as string}
        onChange={handleChange}
        disabled={props.disabled}
      />
    </div>
  );
};

export default TextField;

3. 使用组件时的类型校验 #

假设你的MobX ViewModel是这样定义的：

import { makeAutoObservable } from 'mobx';

class UserViewModel {
  username = '';
  email = '';
  isSaving = false;

  constructor() {
    makeAutoObservable(this);
  }
}

const vm = new UserViewModel();

当你使用TextField时，TypeScript会自动校验propertyName：

// ✅ 合法：username是UserViewModel的属性
<TextField 
  label="Enter your user name" 
  dataSource={vm} 
  propertyName="username" 
  disabled={vm.isSaving} 
/>

// ❌ 编译报错："invalidProp"不是UserViewModel的属性
<TextField 
  label="Enter something" 
  dataSource={vm} 
  propertyName="invalidProp" 
  disabled={vm.isSaving} 
/>

额外说明 #

• 如果你的ViewModel有不同类型的属性（比如数字类型的年龄），可以进一步泛化组件，或者添加类型约束来适配不同的input类型（比如type="number"）。
• 因为MobX的可观察对象支持直接赋值，所以组件内部修改props.dataSource[props.propertyName]的方式是有效的，会自动触发视图更新。

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