如何使用TypeScript接口定义React中的状态对象？

嘿，我来帮你搞定这个TypeScript类型定义的问题～首先得说，你之前的IFields接口定义得不太对，它描述的是“一个包含name字符串属性的对象”，但你的实际fields是有symbol、qty、side这三个固定键的对象，所以类型不匹配才会导致TS报错。下面我给你一步步梳理正确的写法：

1. 定义合法的字段名称类型 #

首先，我们需要明确fields里允许的键有哪些，用联合类型来限定：

type FieldName = 'symbol' | 'qty' | 'side';

这样TS就能检查你传入的字段名是否合法，避免拼写错误。

2. 定义Fields和FieldErrors的类型 #

接下来用TS的Record工具类型来定义fields和fieldErrors的结构——Record<K, T>表示“键为K类型、值为T类型”的对象，非常适合你的字典需求：

// fields的类型：键是FieldName，值是字符串
type Fields = Record<FieldName, string>;

// fieldErrors的类型：键和fields一致，值也是错误字符串（如果允许初始为空，后面可以用Partial调整）
type FieldErrors = Record<FieldName, string>;

如果你希望fieldErrors初始可以是空对象（就像你原来的代码那样），可以用Partial工具类型把所有键变成可选的：

type FieldErrors = Partial<Record<FieldName, string>>;

3. 定义状态接口 #

现在把上面的类型组合成状态接口：

interface IOrderEntryState {
  fields: Fields;
  fieldErrors: FieldErrors;
}

4. 修正组件的状态和方法 #

最后把组件里的状态和onInputChange方法调整成符合TS类型的写法，这里要注意：React状态是不可变的，不要直接修改state里的对象，应该创建新对象来更新状态：

class YourComponent extends React.Component<{}, IOrderEntryState> {
  // 初始化状态，符合我们定义的接口
  state: IOrderEntryState = {
    fields: {
      symbol: '',
      qty: '',
      side: ''
    },
    fieldErrors: {} // 如果用了Partial，这里可以是空对象
  };

  onInputChange = (name: FieldName, value: string, error: string) => {
    // 使用函数式setState，基于之前的状态创建新对象
    this.setState(prevState => ({
      fields: {
        ...prevState.fields,
        [name]: value
      },
      fieldErrors: {
        ...prevState.fieldErrors,
        [name]: error
      }
    }));
  };

  // 其他组件逻辑...
}

这样调整后，TS就能正确推断你的状态结构，同时还能在你传入非法字段名时给出提示，既保证了类型安全，又满足了你用字典形式操作状态的需求～

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