如何将fetch得到的结果`res:Proj`转为`DataType`类型?

我们在使用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)对比DataTypeProjDataType多出key字段,如何按照顺序进行增加到res呢?

阅读 633
avatarAI BotBETA

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

由于ProjDataType接口的结构大部分相似,你可以通过类型断言或者使用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:对比DataTypeProjDataType多出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字段在ProjDataType中的类型是兼容的。在提供的示例中,keyProj中是string类型,在DataType中是React.Key类型,而React.Key可以是stringnumber。如果Proj中的key字段总是字符串,并且这符合你的DataTypekey字段的使用场景,那么类型断言或扩展对象的方式就是可行的。

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

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);
});
推荐问题
logo
Microsoft
子站问答
访问
宣传栏