javascript - 在 Typescript 中使用新对象更新 const 对象的所有属性

标签 javascript typescript

我想用相同类型的新对象更新 IMessage 类型的对象

interface IMessage {
  id: string,
  text: string,
  // and many more attributes
}

const message: IMessage = {
  id: "_id",
  text: "old text",
  // and many more attributes
}

const newMessage: IMessage = {
  id: "_id",
  text: "new text"
  // and many more attributes
}

我期望更新后的 message 的值与 newMessage 完全相同,但我不能重新分配 message 对象,因为 message 被声明为 const。这是我到目前为止所拥有的

const updateMessage = (message: any, newMessage: typeof message): void => {
    for (const attr in newMessage) {
        if (attr !== "id" && newMessage.hasOwnProperty(attr)) {
            message[attr] = newMessage[attr];
        }
    }
};

该功能正在运行。但在这个函数中,我必须声明 (message: any, newMessage: typeof message),否则 Typescript 会抛出警告 Element 隐式具有 'any' 类型,因为类型 'IMessage' 有没有索引签名。如何使该函数仅接受 IMessage 类型的参数?

最佳答案

您对使用 Object.assign() 有什么想法?它将所有自己的和可枚举的属性复制到其第一个参数中,就像您所做的那样。排除 id 会出现一些问题,但您可以使用 rest object destructring 来解决这个问题。 。像这样:

const updateMessage = (message: IMessage, newMessage: IMessage): void => {
    const { id, ...nm } = newMessage; // make nm from newMessage without id prop
    Object.assign(message, nm); // update message with nm
};

这应该像原始的 updateMessage() 函数一样,没有类型错误。请注意,这并不是特别类型安全,因为 Object.assign() 的类型允许任何参数。您可以进行自己的输入,以确保后续参数不会添加任何意外的属性,如下所示:

const safeAssign: <T>(target: T, ...args: Partial<T>[]) => T = Object.assign;

const updateMessage = (message: IMessage, newMessage: IMessage): void => {
    const { id, ...nm } = newMessage;
    safeAssign(message, nm);
};

但它在运行时的行为是相同的。

好的,希望有帮助;祝你好运!

Link to code

关于javascript - 在 Typescript 中使用新对象更新 const 对象的所有属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58875199/

相关文章:

javascript - 样式属性在使用 AngularJs 和 HTML 的 IE 中不起作用

javascript - Node.js 中的错误导出模块 - 关注点分离

javascript - 单击外部以隐藏带有按钮的容器

javascript - 生产中的 Angular 应用程序路由错误

Typescript 合并元组

javascript - ".d.ts"文件,如何将 Promise 结果声明为函数的结果

angular - Angular 4 中的 WebSocket

typescript - 为什么泛型的类型变量通常声明为单个字母(例如 : <T>)?

php - Jquery Onclick 将数据发送到新打开的窗口

javascript - 使用 Angular 将选择下拉列表绑定(bind)到 AJAX 请求