javascript - 如何在 typescript 中将动态值从一个对象添加到另一个不同类型的对象

标签 javascript typescript

interface type1 {
    key1: string;
    key2: string;
    key3?: type3;
}

interface type2 {
    key1: string;
    key2: string;
    key5: string;
    key6: number;
}

interface type3 { 
    key5?: string;
    key6?: number;
}

const obj1: type1 = <type1>{};

const obj2: type2 = {
    key1: 'hi',
    key2: 'hello',
    key5: 'Hola',
    key6: 123
};

const obj3: type3 = <type3>{};

const array1: (keyof type2)[] = ['key1', 'key2'];
const array2: (keyof type3)[] = ['key5', 'key6'];


array1.forEach((key: keyof type2) => {
    obj1[key] = obj2[key]; /* Error occurred while adding value */
});

array2.forEach((key: keyof type3) => {
    obj3[key] = obj2[key]; /* Error occurred while adding value */
});

obj1.key3 = obj3;

console.log(obj1);

我有 3 个不同类型的对象,但有些键在对象中是通用的。我想动态地将值从一个对象添加到另一个对象。我已经添加了到目前为止我尝试过的代码。

有什么办法可以实现吗?实际上,我的键比我在示例中放置的键还要多。将它们一一分配将是巨大且低效的。

提前致谢。

最佳答案

这是一个可行的解决方案,只需对代码进行最少的调整( Playground ):

const obj1: type1 = {} as type1;
const obj2: type2 = { key1: 'hi', key2: 'hello', key5: 'Hola', key6: 123 };
const array1 = ['key1', 'key2'] as const

array1.forEach(<K extends keyof (type1 | type2)>(key: K) => {
  obj1[key] = obj2[key]; 
});

// same with 2nd case (obj2, obj3, array2)

我们可以使用 const 断言将 array1array2 定义为元组,无需注释显式类型。

为了使 obj1obj2 的计算属性访问正常工作,key 必须声明为泛型类型参数K 带有约束 K extends keyof (type1 | type2) (意味着,限制为 type1type2 的所有公共(public)属性>)。请参阅this answer解释使用联合键类型访问计算属性的问题以及为什么需要泛型。

对象传播是第二种选择,其中类型变得更容易一些( Playground ):

const obj1: type1 = {} as type1;
const obj2: type2 = { key1: 'hi', key2: 'hello', key5: 'Hola', key6: 123 };

const obj1New = {
  ...obj1,
  ...(['key1', 'key2'] as const).reduce((acc, cur) =>
    ({ ...acc, ...{ [cur]: obj2[cur] } }), {} as type1),
}

// same with 2nd case (obj2, obj3, array2)

关于javascript - 如何在 typescript 中将动态值从一个对象添加到另一个不同类型的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59170994/

相关文章:

javascript - typescript for 循环不执行

javascript - 如何定义一个具有多个条目的对象作为参数的函数,该函数只接受一个条目?

javascript - stopPropagation() 的行为更令人困惑

javascript - 如何在 HTML Canvas 的边框周围画一条线?

visual-studio-2012 - Typescript 为什么以及何时需要 requirejs

javascript - 使用 TypeScript 和 controllerAs 将方法附加到 Controller

javascript - 如何在 EXTJS MVC 的 Controller 上添加按钮单击事件

javascript - 为什么在调用 ExtJS Grid Store Load 时执行了太多请求?

javascript - ajax 调用中的数据是如何计算的?

javascript - 如何使 Visual Studio Code 使用路径映射进行自动导入?