猿问

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

我想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 implicitly has an 'any' type because type 'IMessage' has no index signature。我怎样才能让这个函数只接受 type 的参数IMessage?


人到中年有点甜
浏览 243回答 2
2回答

慕标5832272

你对使用有Object.assign()什么想法?它将所有自己的和可枚举的属性复制到它的第一个参数中,正如您所做的那样。免除id这一点会有一点小问题,但您可以通过使用rest object destructring来解决这个问题。像这样:const updateMessage = (message: IMessage, newMessage: IMessage): void => {&nbsp; &nbsp; const { id, ...nm } = newMessage; // make nm from newMessage without id prop&nbsp; &nbsp; 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 => {&nbsp; &nbsp; const { id, ...nm } = newMessage;&nbsp; &nbsp; safeAssign(message, nm);};但它在运行时的任何一种方式都是一样的。

慕慕森

您可以为此使用 TS 通用类型。function updateMessage <T>(message: T, newMessage: T): void {&nbsp; &nbsp; for (const attr in newMessage) {&nbsp; &nbsp; &nbsp; &nbsp; if (attr !== "id" && newMessage.hasOwnProperty(attr)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message[attr] = newMessage[attr];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }};然后在调用函数时传递类型。updateMessage<IMessage>(message, newMessage)关于泛型的 TS 文档:https : //www.typescriptlang.org/docs/handbook/generics.html
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答