Question

我想正确地更新学生状态，学生是一个包含用户，城市和成绩对象的对象。我可以在updateStudent函数中完成此操作，但是参数数据并不严格，并且具有任何类型。

我想将参数数据限制为IUser | ICity | IGrade，这种情况下最好的程序是什么？

interface IUser {
  name?: string;
  id?: number;
}
interface ICity {
  city?: string;
  zip?: number;
}
interface IGrade {
  math?: string;
  biology?: string;
}

interface IStudent {
  user: IUser;
  city: ICity;
  grades: IGrade;
}


const [student, setStudent] = useState<IStudent>({
  user: {},
  city: {},
  grade: {},
});


const updateStudent = (data: any, key: string) => {
  setStudent({ ...student, [key]: data });
};

Answer 1

const updateStudent = <S extends IStudent, K extends keyof S>(data: S[K], key: K) => {
  setStudent({ ...student, [key]: data });
};

解决方案是使用两种通用类型：S和K。 data参数定义为键K的值类型，而key代表K。在调用函数期间，TypeScript能够推断两种类型而无需任何类型注释。

两个泛型类型至关重要，因为这是告知我们两个参数之间存在关系的方式。data: S[K], key: K，data将表示为key所选择的值的类型。

要添加的一件事，因为键定义了数据，而不是相反，最好将第一个参数作为键，将第二个参数作为数据。

使用TS正确更新对象

1 个答案: