Array.mapとTypescriptオブジェクトのスプレッド演算子が元の配列にマッピングされていません

Question

Typescriptに配列のメンバーがあります。

const members = [ 
    { 
    name: 'John Lennon', 
    id: 1 
    }, 
    { 
    name: 'Led Zeppelin', 
    id: 2 
    }, 
    { 
    name: 'Freddie Mercury', 
    id: 3 
    } 
]; 

私はその上にマッピングし、それが正常に配列を上書きし、キーの指定を追加し、キー

members.map(member => { 
    member.designation = 'Singer'; 
    return member; 
}); 

を追加してみてください。しかし、私はObject spread演算子を使って同じことをしようとします。

members.map(member => ({ 
    ...member, 
    designation: 'Singer' 
})); 

それが正常にエラーなしでコンパイルが、同時に私のメンバーのアレイの上にキーdesignationをマップしません。

これは正しい方法ですか、何か不足していますが、これはTypescriptオブジェクトの展開操作に問題があります。

Answer 1

最初の例ではオブジェクトを修正し、2番目の例では元のメンバと新しい指定プロパティの値を持つ新しいオブジェクトを作成します。 mapで作成された新しいオブジェクト配列を取得し、それを使用する必要があります。

var memberWithDesignation = members.map(member => ({ 
    ...member, 
    designation: 'Singer' 
})); 
console.log(memberWithDesignation[0].designation); // Will output Singer