前端 - 如何将fetch得到的结果`res：Proj`转为`DataType`类型？

Question

我们在使用Form的时候，一般Form的dataSource有自己的DataType：
例如定义的：

interface DataType {  key: React.Key;  id: number;  name: string;  desc: string;  loc: string;  selected: boolean;  createTime: Date;  updateTime: Date;}

但是我fetch请求的数据有自己的类型。比如：

  export interface Proj {    key: string;    id: number;    name: string;    desc: string;    loc: string;  // 存放位置    createTime?: Date,    updateTime?: Date  }

请求数据：

fetch.invoke('getProj').then((res:Proj) => {  console.log('getProj：' ,res)}

这里遇到2个问题：
1）如何将得到的结果res：Proj转为DataType类型？
2）对比DataType和Proj，DataType多出key字段，如何按照顺序进行增加到res呢？

Answer 1

新增一个转换函数，对于key字段，如果Proj类型中没有这个字段，可以在转换函数中生成这个字段：

function convertProjToDataType(proj: Proj): DataType {  return {    key: proj.key || proj.id.toString(),  // 使用 Proj 的 key，如果不存在则使用 id 转换为字符串    id: proj.id,    name: proj.name,    desc: proj.desc,    loc: proj.loc,    selected: false,  // 默认值，或者根据业务逻辑调整    createTime: proj.createTime || new Date(),  // 如果没有提供，使用当前时间    updateTime: proj.updateTime || new Date()   // 如果没有提供，使用当前时间  };}

示例示例：

fetch.invoke('getProj').then((res: Proj) => {  const dataTypeObj = convertProjToDataType(res);  console.log('Converted DataType Object:', dataTypeObj);});

Answer 2

问题1：如何将得到的结果res：Proj转为DataType类型？

由于Proj和DataType接口的结构大部分相似，你可以通过类型断言或者使用TypeScript的映射类型来将Proj转换为DataType。类型断言是最简单的方式，但请确保你的数据确实符合DataType的结构。

fetch.invoke('getProj').then((res: Proj) => {  // 使用类型断言将Proj转换为DataType  const dataTypeResult: DataType = res as DataType;  console.log('getProj as DataType：', dataTypeResult);}

问题2：对比DataType和Proj，DataType多出selected字段，如何按照顺序进行增加到res呢？

DataType接口中多出的selected字段并不是一个简单的类型转换问题，而是涉及到如何根据业务逻辑为数据添加新属性。如果你希望给res对象添加selected字段，你可以直接扩展该对象，并为selected字段提供一个默认值。

fetch.invoke('getProj').then((res: Proj) => {  // 扩展res对象，并添加selected字段，默认值为false  const dataTypeResult: DataType = {    ...res,    selected: false, // 假设默认值为false，根据具体需求设定  };  console.log('getProj with added selected field：', dataTypeResult);}

注意，上面的代码假设key字段在Proj和DataType中的类型是兼容的。在提供的示例中，key在Proj中是string类型，在DataType中是React.Key类型，而React.Key可以是string或number。如果Proj中的key字段总是字符串，并且这符合你的DataType中key字段的使用场景，那么类型断言或扩展对象的方式就是可行的。

如果DataType中key的类型严格要求与Proj中key的类型不一致，那么你可能需要创建一个转换函数来确保类型安全，或者调整接口定义以匹配实际的数据结构。