如何使用 TypeScript 为对象动态添加属性？

Question

我想用 TypeScript 编写一个函数，为对象添加动态属性。在 JavaScript 中我可以这样做：

function addProperty(object, name, fn) {
    return {
        ...object,
        [name]: fn,
    }
}

如何使用 TypeScript 编写

addProperty

？例如，我可以像那样使用它来动态创建一个带有插件的计算器：

const basicCalculator = {
    add: (n1: number, n2: number) => n1 + n2,
}

const advancedCalculator = addProperty(basicCalculator, 'subtract', (n1: number, n2: number) => n1 - n2);

对我来说重要的是 TypeScript 应该检测到

advancedCalculator

有一个

subtract

函数。

Answer 1

在 TypeScript 中，您可以使用与 JavaScript 相同的语法，使用计算属性名称将动态属性添加到对象。

唯一不同的是需要指定对象的类型、名称和函数参数。

这是一个如何在 TypeScript 中定义 addProperty 函数的示例：

function addProperty<T extends object, K extends PropertyKey, V>(obj: T, key: K, value: V): T & Record<K, V> {
  return { ...obj, [key]: value } as T & Record<K, V>;
}

这个函数需要三个参数：

obj of type T

、

key of type K

和

value of type V

。

它返回一个新对象，它包括原始对象的属性，以及由

key

和

value

指定的新属性。

函数的返回类型为

T & Record<K, V>

，这意味着它是原始对象类型T和一个新的对象类型的联合，该对象具有由key参数指定的单个属性，值为V类型。

使用此函数作为示例，您可以动态地向 TypeScript 中的对象添加属性：

const basicCalculator = {
  add: (n1: number, n2: number) => n1 + n2,
};

const advancedCalculator = addProperty(basicCalculator, 'subtract', (n1: number, n2: number) => n1 - n2);

console.log(advancedCalculator.add(2, 3)); // 5
console.log(advancedCalculator.subtract(3, 2)); // 1

TypeScript 将正确地检测到 advancedCalculator 具有具有指定签名的减法函数，您可以像使用对象的任何其他属性一样使用它。

希望对您有所帮助。